JavaScript+CSS實現(xiàn)唯美蝴蝶動畫
演示
技術(shù)棧
關(guān)于svg標(biāo)簽在svg中關(guān)于圖形的復(fù)用,是通過標(biāo)簽defs來解決的。 舉個例子:在圖形中紅色圓圈 ● 還有黃色圓圈 ● 都是復(fù)用的元素。結(jié)構(gòu)都是一樣的,只是顏色和位置的差別。
關(guān)于figure: <figure標(biāo)簽規(guī)定獨立的流內(nèi)容(圖像、圖表、照片、代碼等等)。
<figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),同時元素的位置相對于主內(nèi)容是獨立的。如果被刪除,則不應(yīng)對文檔流產(chǎn)生影響。
關(guān)于perspective-origin: perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
定義時的perspective -Origin屬性,它是一個元素的子元素,透視圖,而不是元素本身。
perspective-origin: x-axis y-axis;
x-axis
定義該視圖在 x 軸上的位置。默認(rèn)值:50%。
可能的值:
- left
- center
- right
- length
- %
- y-axis
定義該視圖在 y 軸上的位置。默認(rèn)值:50%。
可能的值:
- top
- center
- bottom
- length
- %
源碼
對部分蝴蝶的設(shè)定
<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>
飛動的設(shè)置
@-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); } }
對蝴蝶形體的設(shè)置
.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); }
到此這篇關(guān)于JavaScript實現(xiàn)唯美蝴蝶動畫的文章就介紹到這了,更多相關(guān)JS蝴蝶動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 用函數(shù)實現(xiàn)繼承詳解
下面小編就為大家?guī)硪黄猨avascript 用函數(shù)實現(xiàn)繼承詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JS for循環(huán)中i++ 和 ++i的區(qū)別介紹
這篇文章主要介紹了JS for循環(huán)中i++ 和 ++i的區(qū)別介紹的相關(guān)資料,需要的朋友可以參考下2016-07-07js下獲得客戶端操作系統(tǒng)的函數(shù)代碼(1:vista,2:windows7,3:2000,4:xp,5:2003,6:20
有時候需要在客戶端獲取操作系統(tǒng)的版本,以便更好的給用戶合適的信息,提高用戶體驗,好不容易從網(wǎng)站發(fā)現(xiàn)了這段代碼,分享給大家。2011-10-10setTimeout()與setInterval()方法區(qū)別介紹
計時器setTimeout()和setInterval()兩個都是js的計時功能的函數(shù)兩個有些區(qū)別,下面為大家簡單介紹下,希望對大家有所幫助2013-12-12js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼
這篇文章主要介紹了js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼,需要的朋友可以參考下2015-04-04JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02基于Day.js更優(yōu)雅的處理JavaScript中的日期
Day.js它能夠幫助我們處理JavaScript中的日期,本文就詳細(xì)的介紹一下Day.js的具體使用,可以更簡單的處理JavaScript中的日期和時間2021-09-09