做了两天的唯美蝴蝶动画
Posted 肥学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了做了两天的唯美蝴蝶动画相关的知识，希望对你有一定的参考价值。
目录标题
演示
技术栈
关于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以上是关于做了两天的唯美蝴蝶动画的主要内容，如果未能解决你的问题，请参考以下文章
为了从阿里云服务器拷贝文件我研究了两天的 FileZilla