做了两天的唯美蝴蝶动画

最新推荐文章于 2024-07-11 16:15:52 发布
最新推荐文章于 2024-07-11 16:15:52 发布
阅读量962 收藏 1
点赞数
分类专栏： 前端 文章标签： 动画 css3 css
想看原文请看这个优质博主的博文：https://blog.csdn.net/jiahuiandxuehui?spm=1001.2101.3001.5343
本文链接：https://blog.csdn.net/jiahuiandxuehui/article/details/125472883
版权

目录标题

演示

在这里插入图片描述

技术栈

关于svg标签在svg中关于图形的复用，是通过标签defs来解决的。
举个例子：在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的，只是颜色和位置的差别。
在这里插入图片描述

关于figure：
<figure标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

关于perspective-origin：
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis	
定义该视图在 x 轴上的位置。默认值：50%。

可能的值：

left
center
right
length
%
y-axis	
定义该视图在 y 轴上的位置。默认值：50%。

可能的值：

top
center
bottom
length
%

源码

对部分蝴蝶的设定

<section class="scene3d">
  
  <div class="cube skybox">
    <var class="scale">
    <figure class="face front"></figure>
    <figure class="face back"></figure>
    <figure class="face right"></figure>
    <figure class="face left"></figure>
    <figure class="face top"></figure>
    <figure class="face bottom"></figure>
    </var>
  </div>
  
  <div class="butterfly_container">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

飞动的设置

@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-moz-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-ms-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-o-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-webkit-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-moz-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-ms-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-o-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

对蝴蝶形体的设置


.butterfly_container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotatingY 10s linear infinite;
  -moz-animation: rotatingY 10s linear infinite;
  -ms-animation: rotatingY 10s linear infinite;
  -o-animation: rotatingY 10s linear infinite;
  animation: rotatingY 10s linear infinite;
}
.butterfly_container var {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.butterfly_container var.rotate3d {
  -webkit-transform: rotate3d(1, 0.5, 0, 70deg);
  -moz-transform: rotate3d(1, 0.5, 0, 70deg);
  -ms-transform: rotate3d(1, 0.5, 0, 70deg);
  -o-transform: rotate3d(1, 0.5, 0, 70deg);
  transform: rotate3d(1, 0.5, 0, 70deg);
}
.butterfly_container var.translate3d {
  -webkit-transform: translate3d(-300px, 0px, 0px);
  -moz-transform: translate3d(-300px, 0px, 0px);
  -ms-transform: translate3d(-300px, 0px, 0px);
  -o-transform: translate3d(-300px, 0px, 0px);
  transform: translate3d(-300px, 0px, 0px);
}
.butterfly_container var.translate3d-1 {
  -webkit-animation: fluttering 10s ease-in-out infinite;
  -moz-animation: fluttering 10s ease-in-out infinite;
  -ms-animation: fluttering 10s ease-in-out infinite;
  -o-animation: fluttering 10s ease-in-out infinite;
  animation: fluttering 10s ease-in-out infinite;
}
.butterfly_container.scale_half var.scale {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  -moz-transform: scale3d(0.5, 0.5, 0.5);
  -ms-transform: scale3d(0.5, 0.5, 0.5);
  -o-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
}
.butterfly_container.scale_third var.scale {
  -webkit-transform: scale3d(0.333, 0.333, 0.333);
  -moz-transform: scale3d(0.333, 0.333, 0.333);
  -ms-transform: scale3d(0.333, 0.333, 0.333);
  -o-transform: scale3d(0.333, 0.333, 0.333);
  transform: scale3d(0.333, 0.333, 0.333);
}
.butterfly_container.scale_quarter var.scale {
  -webkit-transform: scale3d(0.25, 0.25, 0.25);
  -moz-transform: scale3d(0.25, 0.25, 0.25);
  -ms-transform: scale3d(0.25, 0.25, 0.25);
  -o-transform: scale3d(0.25, 0.25, 0.25);
  transform: scale3d(0.25, 0.25, 0.25);
}
.butterfly_container figure.butterfly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.butterfly_container figure.butterfly .wing {
  position: absolute;
  width: 50px;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}

点击直接资料领取

如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。

这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种资源。反正看看也不亏。

肥学
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷
05-20
HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷，网上看到的，觉得不错上传上来，供大家一起共同分享学习。
html5 canvas飞舞的蝴蝶动画特效.zip
09-26
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码
2301_76225325的博客
04-02 788
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】left: 50%;top: 50%;自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
网页特效——花间飞舞的蝴蝶
weixin_46039719的博客
05-25 5345
目录 💝蝴蝶飞舞 💝.html 💝.css 💝重视科学和知识 💝蝴蝶飞舞 💝.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>蝴蝶花间飞舞</title> <link rel="stylesheet" href="./style.css"> </head> <b...
蝴蝶飞舞（butterfly）
知屋安砖
12-26 1493
蝴蝶示例HTMLCSSJS 示例 HTML .p-summary h1 Butterfly p a(href="https://ykob.github.io/sketch-threejs/sketch/butterfly.html", target="_blank") |this source. canvas(id="canvas-webgl", class="p...
HTML5 SVG 3D蝴蝶飞舞动画
12-08
在这个蝴蝶飞舞的动画中，可能定义了多个关键帧，分别对应蝴蝶展翅、飞翔、转弯等动作，通过改变`transform`属性实现3D变换，如`translateZ`来模拟深度，`rotateX`和`rotateY`控制翅膀的扇动，以及`scale`调整大小，...
HTML5+SVG打造蝴蝶漫天飞舞动画3D效果
08-18
本教程将深入探讨如何利用这两者来构建一个蝴蝶漫天飞舞的3D动画场景。 首先，HTML5是超文本标记语言的第五个版本，它引入了许多新特性，如语义化标签、离线存储、媒体元素、Canvas画布以及SVG等，极大地提升了网页...
矢量花草树木flash动画
07-24
“蝴蝶飞舞”部分可能运用了关键帧动画原理，通过设置不同时间点的关键帧来定义蝴蝶飞行路径，中间的帧则由Flash自动补间，形成平滑的动画效果。同时，蝴蝶翅膀的开合、身体的转动等细节可以通过动作脚本来实现，...
Flash的引导层动画完整版资料.ppt
11-13
6. 在被引导层的两个关键帧之间创建动作补间动画，引导动画制作完成。 四、多层引导动画 多层引导动画是指利用一个引导层同时引导多个被引导层中的对象。可以将图层拖移到引导层下方，或通过更改图层属性的方法...
CSS效果图大全，收集了各类CSS源代码，转盘、文字雨、煸动翅膀的蝴蝶、vector键盘、两栏布局文章、元素的拖拽定位、转动天枰
09-13
CSS效果图大全，收集了各类CSS源代码，转盘、文字雨、煸动翅膀的蝴蝶、vector键盘、两栏布局文章、元素的拖拽定位、转动天枰、动态改变汽车颜色、大屏随机抽奖、如何让元素保持一定的宽高比、实现modal弹框动画、...
canvas蝴蝶飞舞效果
06-28
HTML5的canvas加Js实现的蝴蝶飞舞的场景，修改index.js的SIZE可改变蝴蝶的大小，需要实现怎样的效果可在index.js修改相应的参数
HTML5 canvas蝴蝶飞舞动画.zip
05-24
HTML5 canvas蝴蝶飞舞动画，蝴蝶飞行动画。
超炫酷HTML5 Canvas蝴蝶飞舞动画
11-07
超炫酷HTML5 Canvas蝴蝶飞舞动画 超炫酷HTML5 Canvas蝴蝶飞舞动画
【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码）】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-30 2953
效果 这不是视频哦！是代码实现的效果。大家喜欢的可以自己再探索探索！可以更加有意思，实现不一样的效果。 代码 下面是完整的代码，大家可以自行去运行实验哦！ 注意：运行时有可能会稍等几秒才会出效果哦！ index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>蝴蝶飞舞</title> <link rel="styl
蝴蝶飞舞 canvas_超炫酷HTML5 Canvas蝴蝶飞舞动画
weixin_39585675的博客
01-27 505
插件简介还记得早些时候我们为大家分享过一款非常炫酷的HTML5蝴蝶3D动画，它是基于HTML5和SVG实现的，效果十分逼真。这次我们要再一次为大家介绍另外一款同样也很酷的HTML5 Canvas蝴蝶飞舞动画，蝴蝶是在Canvas上绘制而成，利用HTML5的动画特性实现蝴蝶的飞舞动画特效，而且这次的蝴蝶在色彩上更加丰富多彩，大家可以学习一下。插件预览插件下载在线演示链接：https://w...
HTML5----移动鼠标:青蛙，蝴蝶，草丛，池塘滑动-jparallax
Damys
08-01 2682
效果：
CSS3----转换（旋转）transform
Damys
08-29 4788
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5605
再看代码： JS部分。
CSS3实现彩色变形爱心动画【附源码】
最新发布
m0_73367097的博客
07-11 2036
CSS3实现彩色变形爱心动画

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肥学

感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值