用CSS伪类制作一个不断旋转的八卦图？
生活随笔
收集整理的這篇文章主要介紹了
用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伪类制作一个不断旋转的八卦图？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS多列布局（实例）
- 下一篇： HTML的display属性将行内元素、