溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用純css實(shí)現(xiàn)太極陰陽(yáng)魚動(dòng)畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
開始操作
一個(gè)極分成四個(gè)塊，圓頭，肚子，尾，還有分離的小圓。
第一塊圓，中間透明。
第二塊與之相連，為了不遮擋第一塊中間的圓所以要改一下
給右上角加圓角屬性改為半圓，加上徑向漸變，原點(diǎn)改為靠左居中再調(diào)一下透明的百分比。
陽(yáng)極結(jié)構(gòu)代碼如下：
<!-- 陽(yáng)極 -->
<main>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
陽(yáng)極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%;
}
陽(yáng)極效果圖如下：
陰極結(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%;
}
陰極效果圖如下：
陽(yáng)極加陰極效果圖：
將2d平面轉(zhuǎn)換為3d代碼如下：
body{ transform-style:preserve-3d; background:#000; perspective:1800px; }
將2d平面轉(zhuǎn)換為3d效果如下：
創(chuàng)建動(dòng)畫關(guān)鍵幀及添加animation屬性代碼：
陽(yáng)極動(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);
}
}
給陽(yáng)極添加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)太極陰陽(yáng)魚動(dòng)畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
