怎么使用JavaScript+CSS实现唯美蝴蝶动画(css,javascript,开发技术)

技术栈

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

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

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

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

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

perspective-origin:x-axisy-axis;

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

可能的值：

• left

• center

• right

• length

• %

• y-axis

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

可能的值：

• top

• center

• bottom

• length

• %

源码

对部分蝴蝶的设定

<sectionclass="scene3d"><divclass="cubeskybox"><varclass="scale"><figureclass="facefront"></figure><figureclass="faceback"></figure><figureclass="faceright"></figure><figureclass="faceleft"></figure><figureclass="facetop"></figure><figureclass="facebottom"></figure></var></div><divclass="butterfly_container"><varclass="rotate3d"><varclass="scale"><varclass="translate3d"><varclass="translate3d-1"><figureclass="butterfly"><svgclass="wingleft"viewBox="0050100"class="iconshape-codepen"><useclass="left"xlink:href="#shape-butterfly-1"rel="externalnofollow"rel="externalnofollow"></use></svg><svgclass="wingright"viewBox="0050100"class="iconshape-codepen"><useclass="left"xlink:href="#shape-butterfly-1"rel="externalnofollow"rel="externalnofollow"></use></svg></figure></var></var></var></var></div>

飞动的设置

@-webkit-keyframesrotating{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-keyframesrotating{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-keyframesrotating{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-keyframesrotating{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);}}@keyframesrotating{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-keyframesrotatingY{100%{-webkit-transform:rotateY(-360deg);-moz-transform:rotateY(-360deg);-ms-transform:rotateY(-360deg);-o-transform:rotateY(-360deg);transform:rotateY(-360deg);}}@-moz-keyframesrotatingY{100%{-webkit-transform:rotateY(-360deg);-moz-transform:rotateY(-360deg);-ms-transform:rotateY(-360deg);-o-transform:rotateY(-360deg);transform:rotateY(-360deg);}}@-ms-keyframesrotatingY{100%{-webkit-transform:rotateY(-360deg);-moz-transform:rotateY(-360deg);-ms-transform:rotateY(-360deg);-o-transform:rotateY(-360deg);transform:rotateY(-360deg);}}@-o-keyframesrotatingY{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:rotatingY10slinearinfinite;-moz-animation:rotatingY10slinearinfinite;-ms-animation:rotatingY10slinearinfinite;-o-animation:rotatingY10slinearinfinite;animation:rotatingY10slinearinfinite;}.butterfly_containervar{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_containervar.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_containervar.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_containervar.translate3d-1{-webkit-animation:fluttering10sease-in-outinfinite;-moz-animation:fluttering10sease-in-outinfinite;-ms-animation:fluttering10sease-in-outinfinite;-o-animation:fluttering10sease-in-outinfinite;animation:fluttering10sease-in-outinfinite;}.butterfly_container.scale_halfvar.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_thirdvar.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_quartervar.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_containerfigure.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_containerfigure.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);}