太極旋轉圖是一種用HTML和CSS設計的圖案,它代表著陰陽的平衡和變化。通過CSS的旋轉和動畫功能,我們可以輕松地制作出這種有趣的圖案。
/* HTML代碼 */ <div class="taiji"></div> /* CSS代碼 */ .taiji { width: 200px; height: 200px; border-radius: 50%; border: 1px solid #000; position: relative; } .taiji:before { content: ''; display: block; width: 100%; height: 50%; background-color: #fff; border-radius: 50% 50% 0 0; } .taiji:after { content: ''; display: block; width: 100%; height: 50%; background-color: #000; border-radius: 0 0 50% 50%; } .taiji:before, .taiji:after { position: absolute; top: 0; left: 0; } .taiji:hover { animation: spin 2s ease-in-out infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在上面的代碼中,我們定義了一個class為taiji的div元素,它的寬高都是200px,并設置了它的邊框和圓角,使它看起來像一個圓。然后我們添加了:before和:after偽元素,分別代表太極的兩個部分,即陰和陽。通過設置它們的背景色和圓角,我們可以制作一個非常真實的太極圖案。
接下來,在taiji:hover是偽類的狀態下,我們使用CSS的動畫功能,將太極不斷旋轉。我們設置了一個名為spin的動畫,它從0度旋轉到360度,用時2秒,然后通過infinite來不斷循環播放。
使用上述代碼,我們就可以輕松地制作出一個太極旋轉圖案,并將它應用到網頁中,為網頁添加一些有趣的元素。
上一篇mysql數據庫搜索教程
下一篇css大盒子居中