JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫(huà)

3403771864 發(fā)布于2022-10-16 15:54 / 429人閱讀

　　演示

　　技術(shù)棧

　我們今天用到svg標(biāo)簽。在svg標(biāo)簽就是用來(lái)解決圖形的復(fù)用。舉個(gè)例子：在圖形中紅色圓圈 ● 還有黃色圓圈 ● 都是復(fù)用的元素。結(jié)構(gòu)都是一樣的，只是顏色和位置的差別。

　　關(guān)于figure：<figure標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

　　<figure元素的的內(nèi)容和主內(nèi)容相關(guān)，且在元素的位置相對(duì)于主內(nèi)容是獨(dú)立的。即使被刪除，對(duì)文檔也不會(huì)影響。

　　關(guān)于perspective-origin： perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。

　　關(guān)于perspective -Origin屬性的定義，表述一個(gè)元素的子元素，透視圖，而不是元素本身。

　　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

　　源碼

　　對(duì)部分蝴蝶的設(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>

　　飛動(dòng)的設(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);
　　}
　　}

　　對(duì)蝴蝶形體的設(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);
　　}

全部?jī)?nèi)容都已講述完畢，歡迎大家關(guān)注后續(xù)更多精彩內(nèi)容。

云服務(wù)器 GPU云服務(wù)器 javascript實(shí)現(xiàn)動(dòng)畫(huà) css3動(dòng)畫(huà) 高性能css3動(dòng)畫(huà) 實(shí)現(xiàn)加載動(dòng)畫(huà)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/128012.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

閱讀 570·2023-03-27 18:33
小程序有關(guān)手寫(xiě)板簽名具體代碼

閱讀 761·2023-03-26 17:27
剖析Vue3中偵聽(tīng)器watch的使用教程

閱讀 658·2023-03-26 17:14
JavaScript取消請(qǐng)求有哪些方法

閱讀 612·2023-03-17 21:13
解析React SSR 中的限流案例

閱讀 546·2023-03-17 08:28
解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

閱讀 1836·2023-02-27 22:32
講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

閱讀 1330·2023-02-27 22:27
JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

閱讀 2212·2023-01-20 08:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫(huà)

相關(guān)文章

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

前端每日實(shí)戰(zhàn) 2018 年 6 月份項(xiàng)目匯總（共 27 個(gè)項(xiàng)目）

前端每日實(shí)戰(zhàn) 2018 年 6 月份項(xiàng)目匯總（共 27 個(gè)項(xiàng)目）

發(fā)表評(píng)論

0條評(píng)論

3403771864

男|高級(jí)講師

TA的文章

匯總有關(guān)JS對(duì)象的創(chuàng)建與繼承

小程序有關(guān)手寫(xiě)板簽名具體代碼

剖析Vue3中偵聽(tīng)器watch的使用教程

JavaScript取消請(qǐng)求有哪些方法

解析React SSR 中的限流案例

解析微信小程序如何實(shí)現(xiàn)日期范圍選擇

講解Web Components實(shí)現(xiàn)類Element UI中的Card卡片

JavaScript使用export和import的兩個(gè)報(bào)錯(cuò)如何解決

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫(huà)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！