JavaScript+CSS实现唯美蝴蝶动画

3403771864 发布于2022-10-16 15:54 / 391人阅读

　　演示

　　技术栈

　我们今天用到svg标签。在svg标签就是用来解决图形的复用。举个例子：在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的，只是颜色和位置的差别。

　　关于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" rel="external nofollow" rel="external nofollow" ></use>
　　</svg>
　　<svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
　　<use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow" rel="external nofollow" ></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);
　　}

全部内容都已讲述完毕，欢迎大家关注后续更多精彩内容。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128012.html

前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

MoAir 2019-08-26 10:29 评论0 收藏0
前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

jokester 2019-08-22 18:25 评论0 收藏0
前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

dingding199389 2019-08-02 10:48 评论0 收藏0