简单的旋转灯笼效果——css3事例

 时间:2024-10-28 06:46:40

1、架构如下图所示,一个 stage(舞台) 一个 container(容器),容器存放着几个div,作为‘灯笼’的扇面;

简单的旋转灯笼效果——css3事例

3、然后我们设置一下 小div 的样式和透明度,通过 border-radius这个属性将div变为圆形,初步的效果如图二;(因为设置看定位,所以div都重合了)

简单的旋转灯笼效果——css3事例

4、然后我们分别设置,每个小div 的颜色和 旋转角度,通过将 div慢慢的散开实现 图二的效果;

简单的旋转灯笼效果——css3事例

5、然后我们再次设置一个悬停事件,触发是容器开始绕 Y 轴转动,实现灯笼转动效果;

简单的旋转灯笼效果——css3事例
  • 烧烤店引流推广方法
  • TikTalk如何修改语言信息
  • bsc剥离机标签纸剥离机安装说明
  • 如何使用blender2.9设计黄色小松鼠简图模型
  • 常见的工资制度有哪些?
  • 热门搜索
    宁波东钱湖旅游攻略 日本旅游签证时间 去三亚旅游注意事项 四月份去哪旅游 昆山旅游景点大全 京都旅游攻略 海口恒大文化旅游城 旅游项目策划方案 湖南旅游景点介绍 福建宁德旅游