JavaScript+CSS實現(xiàn)唯美蝴蝶動畫

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

　　演示

　　技術(shù)棧

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

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

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

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

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

　　perspective-origin: x-axis y-axis;

　　x-axis

　　定義該視圖在 x 軸上的位置。默認值：50%。

　　可能的值：

　　left

　　center

　　right

　　length

　　y-axis

　　定義該視圖在 y 軸上的位置。默認值：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);
　　}

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/128012.html

發(fā)表評論

登陸后可評論

0條評論

3403771864

男|高級講師

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

TA的文章

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

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

閱讀 732·2023-03-26 17:27
剖析Vue3中偵聽器watch的使用教程

閱讀 630·2023-03-26 17:14
JavaScript取消請求有哪些方法

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

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

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

閱讀 1292·2023-02-27 22:27
JavaScript使用export和import的兩個報錯如何解決

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

JavaScript+CSS實現(xiàn)唯美蝴蝶動畫

相關(guān)文章

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

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

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

發(fā)表評論

0條評論

3403771864

男|高級講師

TA的文章

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

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

剖析Vue3中偵聽器watch的使用教程

JavaScript取消請求有哪些方法

解析React SSR 中的限流案例

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

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

JavaScript使用export和import的兩個報錯如何解決

最新活動