當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

用CSS伪类制作一个不断旋转的八卦图？

發(fā)布時(shí)間：2023/12/2 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了用CSS伪类制作一个不断旋转的八卦图？小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

介紹一下如何制作一個(gè)不斷旋轉(zhuǎn)的八卦圖。快速預(yù)覽代碼及效果，點(diǎn)擊：八卦圖

代碼如下：

HTML部分 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS Bin</title> </head> <body><div id="yinyang"></div> </body> </html>CSS部分body{background: #444444; } @keyframes spin{from{transform: rotate(0deg);}to{transform: rotate(360deg);} } #yinyang{width: 100px;height: 100px;border-radius: 50%;position: relative;margin: 100px auto;background: linear-gradient(to bottom,#ffff 0%,#ffff 50%,#000000 50%,#000000 100%);animation-duration: 3s; /*animation-duration屬性指定一個(gè)動(dòng)畫周期的時(shí)長。默認(rèn)值為0s，表示無動(dòng)畫。*/animation-name: spin;animation-iteration-count: infinite; /*infinite 無限循環(huán)播放動(dòng)畫.*//*animation-iteration-count CSS 屬性定義動(dòng)畫在結(jié)束前運(yùn)行的次數(shù) 可以是1次無限循環(huán).*/animation-timing-function:linear; /*CSS animation-timing-function屬性定義CSS動(dòng)畫在每一動(dòng)畫周期中執(zhí)行的節(jié)奏。*/ } #yinyang:before{position: absolute;width: 10px;height: 10px;content: "";top: 25%;left:0;border-radius: 50%;border: 20px black solid;background: white; } #yinyang:after{position: absolute;width: 10px;height: 10px;content: "";top: 25%;right:0;border-radius: 50%;border: 20px white solid;background: black; }

總結(jié)

以上是生活随笔為你收集整理的用CSS伪类制作一个不断旋转的八卦图？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。