中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › JavaScript+CSS实现唯美蝴蝶动画

[前端] JavaScript+CSS实现唯美蝴蝶动画

1967 0
王子 2022-10-21 15:30:00 | 显示全部楼层 |阅读模式
目录

    演示技术栈源码
      对部分蝴蝶的设定飞动的设置对蝴蝶形体的设置



演示




技术栈

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


关于figure： <figure标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
关于perspective-origin： perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
  1. perspective-origin: x-axis y-axis;
复制代码
x-axis   
定义该视图在 x 轴上的位置。默认值：50%。
可能的值：
    leftcenterrightlength%y-axis   
定义该视图在 y 轴上的位置。默认值：50%。
可能的值：
    topcenterbottomlength%

源码


对部分蝴蝶的设定
  1. <section class="scene3d">
  2.   <div class="cube skybox">
  3.     <var class="scale">
  4.     <figure class="face front"></figure>
  5.     <figure class="face back"></figure>
  6.     <figure class="face right"></figure>
  7.     <figure class="face left"></figure>
  8.     <figure class="face top"></figure>
  9.     <figure class="face bottom"></figure>
  10.     </var>
  11.   </div>
  12.   <div class="butterfly_container">
  13.     <var class="rotate3d">
  14.     <var class="scale">
  15.     <var class="translate3d">
  16.     <var class="translate3d-1">
  17.     <figure class="butterfly">
  18.       <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
  19.         <use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow"  rel="external nofollow" ></use>
  20.       </svg>
  21.       <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
  22.         <use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow"  rel="external nofollow" ></use>
  23.       </svg>
  24.     </figure>
  25.     </var>
  26.     </var>
  27.     </var>
  28.     </var>
  29.   </div>
复制代码
飞动的设置
  1. @-webkit-keyframes rotating {
  2.   0% {
  3.     -webkit-transform: rotate3d(0, 0, 0, 0deg);
  4.     -moz-transform: rotate3d(0, 0, 0, 0deg);
  5.     -ms-transform: rotate3d(0, 0, 0, 0deg);
  6.     -o-transform: rotate3d(0, 0, 0, 0deg);
  7.     transform: rotate3d(0, 0, 0, 0deg);
  8.   }
  9.   100% {
  10.     -webkit-transform: rotate3d(0, 1, 0, 720deg);
  11.     -moz-transform: rotate3d(0, 1, 0, 720deg);
  12.     -ms-transform: rotate3d(0, 1, 0, 720deg);
  13.     -o-transform: rotate3d(0, 1, 0, 720deg);
  14.     transform: rotate3d(0, 1, 0, 720deg);
  15.   }
  16. }
  17. @-moz-keyframes rotating {
  18.   0% {
  19.     -webkit-transform: rotate3d(0, 0, 0, 0deg);
  20.     -moz-transform: rotate3d(0, 0, 0, 0deg);
  21.     -ms-transform: rotate3d(0, 0, 0, 0deg);
  22.     -o-transform: rotate3d(0, 0, 0, 0deg);
  23.     transform: rotate3d(0, 0, 0, 0deg);
  24.   }
  25.   100% {
  26.     -webkit-transform: rotate3d(0, 1, 0, 720deg);
  27.     -moz-transform: rotate3d(0, 1, 0, 720deg);
  28.     -ms-transform: rotate3d(0, 1, 0, 720deg);
  29.     -o-transform: rotate3d(0, 1, 0, 720deg);
  30.     transform: rotate3d(0, 1, 0, 720deg);
  31.   }
  32. }
  33. @-ms-keyframes rotating {
  34.   0% {
  35.     -webkit-transform: rotate3d(0, 0, 0, 0deg);
  36.     -moz-transform: rotate3d(0, 0, 0, 0deg);
  37.     -ms-transform: rotate3d(0, 0, 0, 0deg);
  38.     -o-transform: rotate3d(0, 0, 0, 0deg);
  39.     transform: rotate3d(0, 0, 0, 0deg);
  40.   }
  41.   100% {
  42.     -webkit-transform: rotate3d(0, 1, 0, 720deg);
  43.     -moz-transform: rotate3d(0, 1, 0, 720deg);
  44.     -ms-transform: rotate3d(0, 1, 0, 720deg);
  45.     -o-transform: rotate3d(0, 1, 0, 720deg);
  46.     transform: rotate3d(0, 1, 0, 720deg);
  47.   }
  48. }
  49. @-o-keyframes rotating {
  50.   0% {
  51.     -webkit-transform: rotate3d(0, 0, 0, 0deg);
  52.     -moz-transform: rotate3d(0, 0, 0, 0deg);
  53.     -ms-transform: rotate3d(0, 0, 0, 0deg);
  54.     -o-transform: rotate3d(0, 0, 0, 0deg);
  55.     transform: rotate3d(0, 0, 0, 0deg);
  56.   }
  57.   100% {
  58.     -webkit-transform: rotate3d(0, 1, 0, 720deg);
  59.     -moz-transform: rotate3d(0, 1, 0, 720deg);
  60.     -ms-transform: rotate3d(0, 1, 0, 720deg);
  61.     -o-transform: rotate3d(0, 1, 0, 720deg);
  62.     transform: rotate3d(0, 1, 0, 720deg);
  63.   }
  64. }
  65. @keyframes rotating {
  66.   0% {
  67.     -webkit-transform: rotate3d(0, 0, 0, 0deg);
  68.     -moz-transform: rotate3d(0, 0, 0, 0deg);
  69.     -ms-transform: rotate3d(0, 0, 0, 0deg);
  70.     -o-transform: rotate3d(0, 0, 0, 0deg);
  71.     transform: rotate3d(0, 0, 0, 0deg);
  72.   }
  73.   100% {
  74.     -webkit-transform: rotate3d(0, 1, 0, 720deg);
  75.     -moz-transform: rotate3d(0, 1, 0, 720deg);
  76.     -ms-transform: rotate3d(0, 1, 0, 720deg);
  77.     -o-transform: rotate3d(0, 1, 0, 720deg);
  78.     transform: rotate3d(0, 1, 0, 720deg);
  79.   }
  80. }
  81. @-webkit-keyframes rotatingY {
  82.   100% {
  83.     -webkit-transform: rotateY(-360deg);
  84.     -moz-transform: rotateY(-360deg);
  85.     -ms-transform: rotateY(-360deg);
  86.     -o-transform: rotateY(-360deg);
  87.     transform: rotateY(-360deg);
  88.   }
  89. }
  90. @-moz-keyframes rotatingY {
  91.   100% {
  92.     -webkit-transform: rotateY(-360deg);
  93.     -moz-transform: rotateY(-360deg);
  94.     -ms-transform: rotateY(-360deg);
  95.     -o-transform: rotateY(-360deg);
  96.     transform: rotateY(-360deg);
  97.   }
  98. }
  99. @-ms-keyframes rotatingY {
  100.   100% {
  101.     -webkit-transform: rotateY(-360deg);
  102.     -moz-transform: rotateY(-360deg);
  103.     -ms-transform: rotateY(-360deg);
  104.     -o-transform: rotateY(-360deg);
  105.     transform: rotateY(-360deg);
  106.   }
  107. }
  108. @-o-keyframes rotatingY {
  109.   100% {
  110.     -webkit-transform: rotateY(-360deg);
  111.     -moz-transform: rotateY(-360deg);
  112.     -ms-transform: rotateY(-360deg);
  113.     -o-transform: rotateY(-360deg);
  114.     transform: rotateY(-360deg);
  115.   }
  116. }
复制代码
对蝴蝶形体的设置
  1. .butterfly_container {
  2.   position: absolute;
  3.   left: 50%;
  4.   top: 50%;
  5.   width: 100px;
  6.   height: 100px;
  7.   margin-left: -50px;
  8.   margin-top: -50px;
  9.   -webkit-transform-origin: 50% 50%;
  10.   -moz-transform-origin: 50% 50%;
  11.   -ms-transform-origin: 50% 50%;
  12.   -o-transform-origin: 50% 50%;
  13.   transform-origin: 50% 50%;
  14.   -webkit-transform-style: preserve-3d;
  15.   -moz-transform-style: preserve-3d;
  16.   -ms-transform-style: preserve-3d;
  17.   -o-transform-style: preserve-3d;
  18.   transform-style: preserve-3d;
  19.   -webkit-animation: rotatingY 10s linear infinite;
  20.   -moz-animation: rotatingY 10s linear infinite;
  21.   -ms-animation: rotatingY 10s linear infinite;
  22.   -o-animation: rotatingY 10s linear infinite;
  23.   animation: rotatingY 10s linear infinite;
  24. }
  25. .butterfly_container var {
  26.   position: absolute;
  27.   left: 50%;
  28.   top: 50%;
  29.   width: 100px;
  30.   height: 100px;
  31.   margin-left: -50px;
  32.   margin-top: -50px;
  33.   -webkit-transform-style: preserve-3d;
  34.   -moz-transform-style: preserve-3d;
  35.   -ms-transform-style: preserve-3d;
  36.   -o-transform-style: preserve-3d;
  37.   transform-style: preserve-3d;
  38. }
  39. .butterfly_container var.rotate3d {
  40.   -webkit-transform: rotate3d(1, 0.5, 0, 70deg);
  41.   -moz-transform: rotate3d(1, 0.5, 0, 70deg);
  42.   -ms-transform: rotate3d(1, 0.5, 0, 70deg);
  43.   -o-transform: rotate3d(1, 0.5, 0, 70deg);
  44.   transform: rotate3d(1, 0.5, 0, 70deg);
  45. }
  46. .butterfly_container var.translate3d {
  47.   -webkit-transform: translate3d(-300px, 0px, 0px);
  48.   -moz-transform: translate3d(-300px, 0px, 0px);
  49.   -ms-transform: translate3d(-300px, 0px, 0px);
  50.   -o-transform: translate3d(-300px, 0px, 0px);
  51.   transform: translate3d(-300px, 0px, 0px);
  52. }
  53. .butterfly_container var.translate3d-1 {
  54.   -webkit-animation: fluttering 10s ease-in-out infinite;
  55.   -moz-animation: fluttering 10s ease-in-out infinite;
  56.   -ms-animation: fluttering 10s ease-in-out infinite;
  57.   -o-animation: fluttering 10s ease-in-out infinite;
  58.   animation: fluttering 10s ease-in-out infinite;
  59. }
  60. .butterfly_container.scale_half var.scale {
  61.   -webkit-transform: scale3d(0.5, 0.5, 0.5);
  62.   -moz-transform: scale3d(0.5, 0.5, 0.5);
  63.   -ms-transform: scale3d(0.5, 0.5, 0.5);
  64.   -o-transform: scale3d(0.5, 0.5, 0.5);
  65.   transform: scale3d(0.5, 0.5, 0.5);
  66. }
  67. .butterfly_container.scale_third var.scale {
  68.   -webkit-transform: scale3d(0.333, 0.333, 0.333);
  69.   -moz-transform: scale3d(0.333, 0.333, 0.333);
  70.   -ms-transform: scale3d(0.333, 0.333, 0.333);
  71.   -o-transform: scale3d(0.333, 0.333, 0.333);
  72.   transform: scale3d(0.333, 0.333, 0.333);
  73. }
  74. .butterfly_container.scale_quarter var.scale {
  75.   -webkit-transform: scale3d(0.25, 0.25, 0.25);
  76.   -moz-transform: scale3d(0.25, 0.25, 0.25);
  77.   -ms-transform: scale3d(0.25, 0.25, 0.25);
  78.   -o-transform: scale3d(0.25, 0.25, 0.25);
  79.   transform: scale3d(0.25, 0.25, 0.25);
  80. }
  81. .butterfly_container figure.butterfly {
  82.   position: absolute;
  83.   left: 50%;
  84.   top: 50%;
  85.   width: 100px;
  86.   height: 100px;
  87.   margin-left: -50px;
  88.   margin-top: -50px;
  89.   -webkit-transform-style: preserve-3d;
  90.   -moz-transform-style: preserve-3d;
  91.   -ms-transform-style: preserve-3d;
  92.   -o-transform-style: preserve-3d;
  93.   transform-style: preserve-3d;
  94.   -webkit-transform-origin: 50% 50%;
  95.   -moz-transform-origin: 50% 50%;
  96.   -ms-transform-origin: 50% 50%;
  97.   -o-transform-origin: 50% 50%;
  98.   transform-origin: 50% 50%;
  99. }
  100. .butterfly_container figure.butterfly .wing {
  101.   position: absolute;
  102.   width: 50px;
  103.   height: 100px;
  104.   -webkit-transform-style: preserve-3d;
  105.   -moz-transform-style: preserve-3d;
  106.   -ms-transform-style: preserve-3d;
  107.   -o-transform-style: preserve-3d;
  108.   transform-style: preserve-3d;
  109.   -webkit-transform-origin: 50% 50%;
  110.   -moz-transform-origin: 50% 50%;
  111.   -ms-transform-origin: 50% 50%;
  112.   -o-transform-origin: 50% 50%;
  113.   transform-origin: 50% 50%;
  114.   -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  115.   -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  116.   -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  117.   -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  118.   transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  119. }
复制代码
到此这篇关于JavaScript实现唯美蝴蝶动画的文章就介绍到这了,更多相关JS蝴蝶动画内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天