您现在的位置是：网站首页> 编程资料编程资料

JavaScript+CSS实现唯美蝴蝶动画_javascript技巧_

2023-05-24 417人已围观

简介 JavaScript+CSS实现唯美蝴蝶动画_javascript技巧_

演示

技术栈

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

关于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
  • %

源码

对部分蝴蝶的设定

飞动的设置

@-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); }

到此这篇关于JavaScript实现唯美蝴蝶动画的文章就介绍到这了,更多相关JS蝴蝶动画内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网