JavaScript+CSS实现唯美蝴蝶动画

演示

技术栈

关于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" 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);
}

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

JavaScript+CSS实现唯美蝴蝶动画

演示

技术栈

源码

对部分蝴蝶的设定

飞动的设置

对蝴蝶形体的设置

相关推荐

ASP页面中怎么嵌入JavaScript或CSS

JavaScript引擎如何实现async/await

Javascript中promise,async和await的区别是什么

Javascript中async与await的捕捉错误怎么理解

JavaScript如何优雅的处理async/await

JavaScript中的Async和Await怎么用

JavaScript如何实现await多个async函数

如何使用HTML+CSS+JS制作3D立方体图像库