CSS3实现太极图教程
生活随笔
收集整理的這篇文章主要介紹了
CSS3实现太极图教程
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們先來(lái)看效果：
制作步驟：
1、先畫個(gè)半圓
.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、畫左邊的圓
這里為了節(jié)省標(biāo)簽 就直接用偽類了
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、在加個(gè)動(dòng)畫就完美了
@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>這里我在補(bǔ)充一點(diǎn)：如果要改左右的圓心的大小 是要計(jì)算的 盒子的高度 - 偽類的邊框 x 2 = 圓心的大小
總結(jié)
以上是生活随笔為你收集整理的CSS3实现太极图教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： lucene directory
- 下一篇： css使图片有3d效果,利用CSS3实现