如何使用純css實(shí)現(xiàn)太極陰陽魚動(dòng)畫

小編給大家分享一下如何使用純css實(shí)現(xiàn)太極陰陽魚動(dòng)畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)伊金霍洛,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

開始操作

一個(gè)極分成四個(gè)塊，圓頭，肚子，尾，還有分離的小圓。

第一塊圓，中間透明。

第二塊與之相連，為了不遮擋第一塊中間的圓所以要改一下

給右上角加圓角屬性改為半圓，加上徑向漸變，原點(diǎn)改為靠左居中再調(diào)一下透明的百分比。

陽極結(jié)構(gòu)代碼如下：

<!-- 陽極 -->

<main>

<section></section>

<section></section>

<section></section>

<section></section>

</main>

陽極css代碼如下：

main{

width:500px;

height:500px;

position:absolute;

top:100px;

left:500px;

transform:rotateX(-20deg);

}

main section:nth-of-type(1){

width:250px;

height:250px;

position:absolute;

bottom:0;

right:0;

border-bottom-right-radius:500px;

background:radial-gradient(circle at 0% 50%,transparent 44.6%,#284070 0%);

}

main section:nth-of-type(2){

width:250px;

height:250px;

position:absolute;

top:0;

right:0;

border-top-right-radius:500px;

background:radial-gradient(circle at 0% 50%,transparent 44.6%,#284070 0%);

}

main section:nth-of-type(3){

width:250px;

height:250px;

position:absolute;

top:0;

left:125px;

border-radius:50%;

background:radial-gradient(circle at center,transparent 62.5px,#284070 0%);

}

main section:nth-of-type(4){

width:125px;

height:125px;

background:#284070;

position:absolute;

bottom:62.5px;

left:187.5px;

border-radius:50%;

}

陽極效果圖如下：

陰極結(jié)構(gòu)代碼如下：

<!-- 陰極 -->

<article>

<aside></aside>

<aside></aside>

<aside></aside>

<aside></aside>

</article>

陰極css代碼如下：

article{

width:500px;

height:500px;

position:absolute;

top:100px;

left:500px;

transform:rotateX(-20deg);

}

article aside:nth-of-type(1){

width:250px;

height:250px;

position:absolute;

bottom:0;

left:0;

border-bottom-left-radius:500px;

background:radial-gradient(circle at 100% 50%,transparent 44.6%,#889090 0%);

}

article aside:nth-of-type(2){

width:250px;

height:250px;

position:absolute;

top:0;

left:0;

border-top-left-radius:500px;

background:radial-gradient(circle at 100% 50%,transparent 44.6%,#889090 0%);

}

article aside:nth-of-type(3){

width:250px;

height:250px;

position:absolute;

bottom:0;

left:125px;

border-radius:50%;

background:radial-gradient(circle at center,transparent 62.5px,#889090 0%);

}

article aside:nth-of-type(4){

width:125px;

height:125px;

background:#889090;

position:absolute;

top:62.5px;

left:187.5px;

border-radius:50%;

}

陰極效果圖如下：

陽極加陰極效果圖：

將2d平面轉(zhuǎn)換為3d代碼如下：

body{  transform-style:preserve-3d;  background:#000;  perspective:1800px; }

將2d平面轉(zhuǎn)換為3d效果如下：

創(chuàng)建動(dòng)畫關(guān)鍵幀及添加animation屬性代碼：

陽極動(dòng)畫關(guān)鍵幀：

@keyframes mv1{

0%{

transform:rotateX(45deg) rotateY(30deg) rotateZ(0deg);

}

50%{

transform:rotateX(45deg) rotateY(30deg) rotateZ(-180deg);

}

100%{

transform:rotateX(45deg) rotateY(30deg) rotateZ(-360deg);

}

}

給陽極添加animation屬性代碼：

main{

transform:rotateX(45deg) rotateY(30deg);

animation:mv1 2.5s linear infinite;

}

陰極動(dòng)畫關(guān)鍵幀：

@keyframes mv2{

0%{

transform:rotateX(45deg) rotateY(-30deg) rotateZ(0deg);

}

50%{

transform:rotateX(45deg) rotateY(-30deg) rotateZ(-180deg);

}

100%{

transform:rotateX(45deg) rotateY(-30deg) rotateZ(-360deg);

}

}

給陰極添加animation屬性代碼：

article{

transform:rotateX(45deg) rotateY(-30deg);

animation:mv2 2.5s linear infinite;

}

以上是“如何使用純css實(shí)現(xiàn)太極陰陽魚動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：如何使用純css實(shí)現(xiàn)太極陰陽魚動(dòng)畫
本文鏈接：http://bm7419.com/article46/psdihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、品牌網(wǎng)站設(shè)計(jì)、全網(wǎng)營銷推廣、企業(yè)建站、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)