CSS3实现太极图教程
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现太极图教程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們先來看效果：
制作步驟：
1、先畫個半圓
.box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0;border-style: solid;border-color: #000;border-radius: 50%;position: relative;animation: taiji 1.5s linear infinite}2、畫左邊的圓
這里為了節省標簽 就直接用偽類了
3、畫右邊的圓
.box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff;border: 52.5px solid #000;border-radius: 50%;}4、在加個動畫就完美了
@keyframes taiji {from {transform: rotate(0deg)}to {transform: rotate(360deg);}}完整代碼：
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>小鑫博客</title><style>.box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0;border-style: solid;border-color: #000;border-radius: 50%;position: relative;animation: autoplay 1.5s linear infinite}.box:before{ content: ""; position: absolute;top: -75px; left: 0; width: 45px;height: 45px; background: #000;border: 52.5px solid #fff;border-radius: 50%;}.box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff;border: 52.5px solid #000;border-radius: 50%;}@keyframes autoplay {from {transform: rotate(0deg)}to {transform: rotate(360deg)}}</style> </head> <body><div class="box"></div> </body> </html>這里我在補充一點：如果要改左右的圓心的大小 是要計算的 盒子的高度 - 偽類的邊框 x 2 = 圓心的大小
總結
以上是生活随笔為你收集整理的CSS3实现太极图教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lucene directory
- 下一篇： 类的学习。