行业资讯

怎么使用JavaScript+CSS实现唯美蝴蝶动画

发布时间：2022-07-13 14:06:47 作者：iii
来源：亿速云 阅读：177

本篇内容主要讲解“怎么使用JavaScript+CSS实现唯美蝴蝶动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用JavaScript+CSS实现唯美蝴蝶动画”吧!

技术栈

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

怎么使用JavaScript+CSS实现唯美蝴蝶动画

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

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

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

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

perspective-origin: x-axis y-axis;

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

可能的值：

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

可能的值：

源码

对部分蝴蝶的设定

<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+CSS实现唯美蝴蝶动画”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

推荐阅读：
  1. 使用纯CSS实现蝴蝶标本展示框效果
  2. html5表白唯美动画表白代码

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

javascript css

上一篇：怎么使用Python代码实现一款永久免费PDF编辑工具

下一篇：怎么使用js实现上下滑动轮播

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号