當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2023/12/2 CSS 58 豆豆

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

前言

介紹一下如何制作一個不斷旋轉的八卦圖。快速預覽代碼及效果，點擊：八卦圖

代碼如下：

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屬性指定一個動畫周期的時長。默認值為0s，表示無動畫。*/animation-name: spin;animation-iteration-count: infinite; /*infinite 無限循環播放動畫.*//*animation-iteration-count CSS 屬性定義動畫在結束前運行的次數可以是1次無限循環.*/animation-timing-function:linear; /*CSS animation-timing-function屬性定義CSS動畫在每一動畫周期中執行的節奏。*/ } #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; }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。