JavaScript+CSS實現唯美蝴蝶動畫

3403771864 發布于2022-10-16 15:54 / 424人閱讀

　　演示

　　技術棧

　我們今天用到svg標簽。在svg標簽就是用來解決圖形的復用。舉個例子：在圖形中紅色圓圈 ● 還有黃色圓圈 ● 都是復用的元素。結構都是一樣的，只是顏色和位置的差別。

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

全部內容都已講述完畢，歡迎大家關注后續更多精彩內容。

GPU云服務器云服務器 javascript實現動畫 css3動畫高性能css3動畫實現加載動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128012.html

前端必須要珍藏的技術文章和面試題

摘要：前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下前端工程師日常工作所需要的學習資料查找，幫助學習者快速掌握前端工程師開發的基本知識編程始于足下記住再牛逼的夢想也抵不住傻逼似的堅持蝴蝶前端工程師學習資料，快速查找面試題，經典技術文章的總結，編程技巧，幫助學習者快速定位問題花點時間整理出一下web前端工程師日常工作所需要的學習資料...

MoAir 2019-08-26 10:29 評論0 收藏0
前端每日實戰 2018 年 6 月份項目匯總（共 27 個項目）

摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...

jokester 2019-08-22 18:25 評論0 收藏0
前端每日實戰 2018 年 6 月份項目匯總（共 27 個項目）

摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如過往項目 2018 年 5 月份項目匯總（共 30 個項目） 2018 年 4 月份項目匯總（共 8 個項目） 2018 年 6 月份發布的項目 ...

dingding199389 2019-08-02 10:48 評論0 收藏0