资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript+CSS实现唯美蝴蝶动画

JavaScript+CSS实现唯美蝴蝶动画

3403771864 / 579人阅读

　　演示

1.gif

　　技术栈

　   我们今天用到svg标签。在svg标签就是用来解决图形的复用。 举个例子：在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的，只是颜色和位置的差别。

2.png

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

　　<figure元素的的内容和主内容相关，且在元素的位置相对于主内容是独立的。即使被删除，对文档也不会影响。

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

　　关于perspective -Origin属性的定义，表述一个元素的子元素，透视图，而不是元素本身。

</>复制代码 
  1. 　　perspective-origin: x-axis y-axis;

　　x-axis

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

　　可能的值：

　　left

　　center

　　right

　　length

　　%

　　y-axis

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

　　可能的值：

　　top

　　center

　　bottom

　　length

　　%

　　源码

　　对部分蝴蝶的设定　

</>复制代码 
  1. 　<section class="scene3d">
  2. 　　<div class="cube skybox">
  3. 　　<var class="scale">
  4. 　　<figure class="face front"></figure>
  5. 　　<figure class="face back"></figure>
  6. 　　<figure class="face right"></figure>
  7. 　　<figure class="face left"></figure>
  8. 　　<figure class="face top"></figure>
  9. 　　<figure class="face bottom"></figure>
  10. 　　</var>
  11. 　　</div>
  12. 　　<div class="butterfly_container">
  13. 　　<var class="rotate3d">
  14. 　　<var class="scale">
  15. 　　<var class="translate3d">
  16. 　　<var class="translate3d-1">
  17. 　　<figure class="butterfly">
  18. 　　<svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
  19. 　　<use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow" rel="external nofollow" ></use>
  20. 　　</svg>
  21. 　　<svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
  22. 　　<use class="left" xlink:href="#shape-butterfly-1" rel="external nofollow" rel="external nofollow" ></use>
  23. 　　</svg>
  24. 　　</figure>
  25. 　　</var>
  26. 　　</var>
  27. 　　</var>
  28. 　　</var>
  29. 　　</div>

　　飞动的设置


</>复制代码 
  1. 　　@-webkit-keyframes rotating {
  2. 　　0% {
  3. 　　-webkit-transform: rotate3d(0, 0, 0, 0deg);
  4. 　　-moz-transform: rotate3d(0, 0, 0, 0deg);
  5. 　　-ms-transform: rotate3d(0, 0, 0, 0deg);
  6. 　　-o-transform: rotate3d(0, 0, 0, 0deg);
  7. 　　transform: rotate3d(0, 0, 0, 0deg);
  8. 　　}
  9. 　　100% {
  10. 　　-webkit-transform: rotate3d(0, 1, 0, 720deg);
  11. 　　-moz-transform: rotate3d(0, 1, 0, 720deg);
  12. 　　-ms-transform: rotate3d(0, 1, 0, 720deg);
  13. 　　-o-transform: rotate3d(0, 1, 0, 720deg);
  14. 　　transform: rotate3d(0, 1, 0, 720deg);
  15. 　　}
  16. 　　}
  17. 　　@-moz-keyframes rotating {
  18. 　　0% {
  19. 　　-webkit-transform: rotate3d(0, 0, 0, 0deg);
  20. 　　-moz-transform: rotate3d(0, 0, 0, 0deg);
  21. 　　-ms-transform: rotate3d(0, 0, 0, 0deg);
  22. 　　-o-transform: rotate3d(0, 0, 0, 0deg);
  23. 　　transform: rotate3d(0, 0, 0, 0deg);
  24. 　　}
  25. 　　100% {
  26. 　　-webkit-transform: rotate3d(0, 1, 0, 720deg);
  27. 　　-moz-transform: rotate3d(0, 1, 0, 720deg);
  28. 　　-ms-transform: rotate3d(0, 1, 0, 720deg);
  29. 　　-o-transform: rotate3d(0, 1, 0, 720deg);
  30. 　　transform: rotate3d(0, 1, 0, 720deg);
  31. 　　}
  32. 　　}
  33. 　　@-ms-keyframes rotating {
  34. 　　0% {
  35. 　　-webkit-transform: rotate3d(0, 0, 0, 0deg);
  36. 　　-moz-transform: rotate3d(0, 0, 0, 0deg);
  37. 　　-ms-transform: rotate3d(0, 0, 0, 0deg);
  38. 　　-o-transform: rotate3d(0, 0, 0, 0deg);
  39. 　　transform: rotate3d(0, 0, 0, 0deg);
  40. 　　}
  41. 　　100% {
  42. 　　-webkit-transform: rotate3d(0, 1, 0, 720deg);
  43. 　　-moz-transform: rotate3d(0, 1, 0, 720deg);
  44. 　　-ms-transform: rotate3d(0, 1, 0, 720deg);
  45. 　　-o-transform: rotate3d(0, 1, 0, 720deg);
  46. 　　transform: rotate3d(0, 1, 0, 720deg);
  47. 　　}
  48. 　　}
  49. 　　@-o-keyframes rotating {
  50. 　　0% {
  51. 　　-webkit-transform: rotate3d(0, 0, 0, 0deg);
  52. 　　-moz-transform: rotate3d(0, 0, 0, 0deg);
  53. 　　-ms-transform: rotate3d(0, 0, 0, 0deg);
  54. 　　-o-transform: rotate3d(0, 0, 0, 0deg);
  55. 　　transform: rotate3d(0, 0, 0, 0deg);
  56. 　　}
  57. 　　100% {
  58. 　　-webkit-transform: rotate3d(0, 1, 0, 720deg);
  59. 　　-moz-transform: rotate3d(0, 1, 0, 720deg);
  60. 　　-ms-transform: rotate3d(0, 1, 0, 720deg);
  61. 　　-o-transform: rotate3d(0, 1, 0, 720deg);
  62. 　　transform: rotate3d(0, 1, 0, 720deg);
  63. 　　}
  64. 　　}
  65. 　　@keyframes rotating {
  66. 　　0% {
  67. 　　-webkit-transform: rotate3d(0, 0, 0, 0deg);
  68. 　　-moz-transform: rotate3d(0, 0, 0, 0deg);
  69. 　　-ms-transform: rotate3d(0, 0, 0, 0deg);
  70. 　　-o-transform: rotate3d(0, 0, 0, 0deg);
  71. 　　transform: rotate3d(0, 0, 0, 0deg);
  72. 　　}
  73. 　　100% {
  74. 　　-webkit-transform: rotate3d(0, 1, 0, 720deg);
  75. 　　-moz-transform: rotate3d(0, 1, 0, 720deg);
  76. 　　-ms-transform: rotate3d(0, 1, 0, 720deg);
  77. 　　-o-transform: rotate3d(0, 1, 0, 720deg);
  78. 　　transform: rotate3d(0, 1, 0, 720deg);
  79. 　　}
  80. 　　}
  81. 　　@-webkit-keyframes rotatingY {
  82. 　　100% {
  83. 　　-webkit-transform: rotateY(-360deg);
  84. 　　-moz-transform: rotateY(-360deg);
  85. 　　-ms-transform: rotateY(-360deg);
  86. 　　-o-transform: rotateY(-360deg);
  87. 　　transform: rotateY(-360deg);
  88. 　　}
  89. 　　}
  90. 　　@-moz-keyframes rotatingY {
  91. 　　100% {
  92. 　　-webkit-transform: rotateY(-360deg);
  93. 　　-moz-transform: rotateY(-360deg);
  94. 　　-ms-transform: rotateY(-360deg);
  95. 　　-o-transform: rotateY(-360deg);
  96. 　　transform: rotateY(-360deg);
  97. 　　}
  98. 　　}
  99. 　　@-ms-keyframes rotatingY {
  100. 　　100% {
  101. 　　-webkit-transform: rotateY(-360deg);
  102. 　　-moz-transform: rotateY(-360deg);
  103. 　　-ms-transform: rotateY(-360deg);
  104. 　　-o-transform: rotateY(-360deg);
  105. 　　transform: rotateY(-360deg);
  106. 　　}
  107. 　　}
  108. 　　@-o-keyframes rotatingY {
  109. 　　100% {
  110. 　　-webkit-transform: rotateY(-360deg);
  111. 　　-moz-transform: rotateY(-360deg);
  112. 　　-ms-transform: rotateY(-360deg);
  113. 　　-o-transform: rotateY(-360deg);
  114. 　　transform: rotateY(-360deg);
  115. 　　}
  116. 　　}

　　对蝴蝶形体的设置

</>复制代码 
  1. 　　.butterfly_container {
  2. 　　position: absolute;
  3. 　　left: 50%;
  4. 　　top: 50%;
  5. 　　width: 100px;
  6. 　　height: 100px;
  7. 　　margin-left: -50px;
  8. 　　margin-top: -50px;
  9. 　　-webkit-transform-origin: 50% 50%;
  10. 　　-moz-transform-origin: 50% 50%;
  11. 　　-ms-transform-origin: 50% 50%;
  12. 　　-o-transform-origin: 50% 50%;
  13. 　　transform-origin: 50% 50%;
  14. 　　-webkit-transform-style: preserve-3d;
  15. 　　-moz-transform-style: preserve-3d;
  16. 　　-ms-transform-style: preserve-3d;
  17. 　　-o-transform-style: preserve-3d;
  18. 　　transform-style: preserve-3d;
  19. 　　-webkit-animation: rotatingY 10s linear infinite;
  20. 　　-moz-animation: rotatingY 10s linear infinite;
  21. 　　-ms-animation: rotatingY 10s linear infinite;
  22. 　　-o-animation: rotatingY 10s linear infinite;
  23. 　　animation: rotatingY 10s linear infinite;
  24. 　　}
  25. 　　.butterfly_container var {
  26. 　　position: absolute;
  27. 　　left: 50%;
  28. 　　top: 50%;
  29. 　　width: 100px;
  30. 　　height: 100px;
  31. 　　margin-left: -50px;
  32. 　　margin-top: -50px;
  33. 　　-webkit-transform-style: preserve-3d;
  34. 　　-moz-transform-style: preserve-3d;
  35. 　　-ms-transform-style: preserve-3d;
  36. 　　-o-transform-style: preserve-3d;
  37. 　　transform-style: preserve-3d;
  38. 　　}
  39. 　　.butterfly_container var.rotate3d {
  40. 　　-webkit-transform: rotate3d(1, 0.5, 0, 70deg);
  41. 　　-moz-transform: rotate3d(1, 0.5, 0, 70deg);
  42. 　　-ms-transform: rotate3d(1, 0.5, 0, 70deg);
  43. 　　-o-transform: rotate3d(1, 0.5, 0, 70deg);
  44. 　　transform: rotate3d(1, 0.5, 0, 70deg);
  45. 　　}
  46. 　　.butterfly_container var.translate3d {
  47. 　　-webkit-transform: translate3d(-300px, 0px, 0px);
  48. 　　-moz-transform: translate3d(-300px, 0px, 0px);
  49. 　　-ms-transform: translate3d(-300px, 0px, 0px);
  50. 　　-o-transform: translate3d(-300px, 0px, 0px);
  51. 　　transform: translate3d(-300px, 0px, 0px);
  52. 　　}
  53. 　　.butterfly_container var.translate3d-1 {
  54. 　　-webkit-animation: fluttering 10s ease-in-out infinite;
  55. 　　-moz-animation: fluttering 10s ease-in-out infinite;
  56. 　　-ms-animation: fluttering 10s ease-in-out infinite;
  57. 　　-o-animation: fluttering 10s ease-in-out infinite;
  58. 　　animation: fluttering 10s ease-in-out infinite;
  59. 　　}
  60. 　　.butterfly_container.scale_half var.scale {
  61. 　　-webkit-transform: scale3d(0.5, 0.5, 0.5);
  62. 　　-moz-transform: scale3d(0.5, 0.5, 0.5);
  63. 　　-ms-transform: scale3d(0.5, 0.5, 0.5);
  64. 　　-o-transform: scale3d(0.5, 0.5, 0.5);
  65. 　　transform: scale3d(0.5, 0.5, 0.5);
  66. 　　}
  67. 　　.butterfly_container.scale_third var.scale {
  68. 　　-webkit-transform: scale3d(0.333, 0.333, 0.333);
  69. 　　-moz-transform: scale3d(0.333, 0.333, 0.333);
  70. 　　-ms-transform: scale3d(0.333, 0.333, 0.333);
  71. 　　-o-transform: scale3d(0.333, 0.333, 0.333);
  72. 　　transform: scale3d(0.333, 0.333, 0.333);
  73. 　　}
  74. 　　.butterfly_container.scale_quarter var.scale {
  75. 　　-webkit-transform: scale3d(0.25, 0.25, 0.25);
  76. 　　-moz-transform: scale3d(0.25, 0.25, 0.25);
  77. 　　-ms-transform: scale3d(0.25, 0.25, 0.25);
  78. 　　-o-transform: scale3d(0.25, 0.25, 0.25);
  79. 　　transform: scale3d(0.25, 0.25, 0.25);
  80. 　　}
  81. 　　.butterfly_container figure.butterfly {
  82. 　　position: absolute;
  83. 　　left: 50%;
  84. 　　top: 50%;
  85. 　　width: 100px;
  86. 　　height: 100px;
  87. 　　margin-left: -50px;
  88. 　　margin-top: -50px;
  89. 　　-webkit-transform-style: preserve-3d;
  90. 　　-moz-transform-style: preserve-3d;
  91. 　　-ms-transform-style: preserve-3d;
  92. 　　-o-transform-style: preserve-3d;
  93. 　　transform-style: preserve-3d;
  94. 　　-webkit-transform-origin: 50% 50%;
  95. 　　-moz-transform-origin: 50% 50%;
  96. 　　-ms-transform-origin: 50% 50%;
  97. 　　-o-transform-origin: 50% 50%;
  98. 　　transform-origin: 50% 50%;
  99. 　　}
  100. 　　.butterfly_container figure.butterfly .wing {
  101. 　　position: absolute;
  102. 　　width: 50px;
  103. 　　height: 100px;
  104. 　　-webkit-transform-style: preserve-3d;
  105. 　　-moz-transform-style: preserve-3d;
  106. 　　-ms-transform-style: preserve-3d;
  107. 　　-o-transform-style: preserve-3d;
  108. 　　transform-style: preserve-3d;
  109. 　　-webkit-transform-origin: 50% 50%;
  110. 　　-moz-transform-origin: 50% 50%;
  111. 　　-ms-transform-origin: 50% 50%;
  112. 　　-o-transform-origin: 50% 50%;
  113. 　　transform-origin: 50% 50%;
  114. 　　-webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  115. 　　-moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  116. 　　-ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  117. 　　-o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  118. 　　transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  119. 　　}

        全部内容都已讲述完毕，欢迎大家关注后续更多精彩内容。

云服务器 GPU云服务器 javascript实现动画 css3动画 高性能css3动画 实现加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128012.html

相关文章

  • 前端必须要珍藏的技术文章和面试题

    摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶 前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

    MoAir 评论0 收藏0

  • 前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

    jokester 评论0 收藏0

  • 前端每日实战 2018 年 6 月份项目汇总（共 27 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一个表达怀念童年心情的条纹彩虹心特效视频演示如 过往项目 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（共 8 个项目） 2018 年 6 月份发布的项目 ...

    dingding199389 评论0 收藏0

发表评论

登陆后可评论

0条评论

3403771864

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<