中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
CSS3繪制旋轉(zhuǎn)的太極圖案(一)

 

 

 實(shí)現(xiàn)步驟:

基礎(chǔ)HTML:

<div class="box-taiji">    <div class="circle-01"></div>    <div class="circle-02"></div></div>

 

 

步驟一:

 

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}

畫一個(gè)寬高為400px的圓,加上陰影。

 

步驟二:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}

利用偽類實(shí)現(xiàn)左右兩個(gè)半圓,一黑一白。寬為200px,高為400px;

 

步驟三:

 

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}.circle-01,.circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;}.circle-01 {top:0;left:100px;background-color:#000;}

 

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}.circle-01,.circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;}.circle-01 {top:0;left:100px;background-color:#000;}.circle-02 {bottom:0;right:100px;background-color:#fff;}

依次畫兩個(gè)寬高都為200px的圓,一黑一白。上下定位。

 

步驟四:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}.circle-01,.circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;}.circle-01 {top:0;left:100px;background-color:#000;}.circle-02 {bottom:0;right:100px;background-color:#fff;}.circle-01:after,.circle-02:after {width:75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}.circle-01:after {top:60px;left:55px;background-color:#fff;}.circle-02:after {bottom:60px;right:55px;background-color:#000;}

組后兩個(gè)黑白小圓,加上,布局效果搞定。

 

步驟五:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}.circle-01,.circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;}.circle-01 {top:0;left:100px;background-color:#000;}.circle-02 {bottom:0;right:100px;background-color:#fff;}.circle-01:after,.circle-02:after {width:75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}.circle-01:after {top:60px;left:55px;background-color:#fff;}.circle-02:after {bottom:60px;right:55px;background-color:#000;}@keyframes rotation {    0% {transform:rotate(0deg);}    100% {transform:rotate(360deg);}}@-webkit-keyframes rotation {    0% {-webkit-transform:rotate(0deg);}    100% {-webkit-transform:rotate(360deg);}}@-moz-keyframes rotation {    0% {-moz-transform:rotate(0deg);}    100% {-moz-transform:rotate(360deg);}}

添加上動(dòng)畫效果,搞定、收工?。?!

 

 

總結(jié):

1、效果布局主要用了用了3個(gè)DIV,配合:before、:after利用css3中的圓角(border-radius)、陰影(box-shadow)完成。

2、動(dòng)畫效果CSS3中的@keyframes、animation

 

完整代碼:

<!doctype html><html><head><meta charset="utf-8"><title>CSS3繪制旋轉(zhuǎn)的太極圖案</title><style>body {background-color:#555;}.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}.box-taiji:before,.box-taiji:after {width:200px;height:400px;position:absolute;top:0;display:block;content:"";}.box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}.box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}.circle-01,.circle-02 {width:200px;height:200px;position:absolute;z-index:2;border-radius:300px;}.circle-01 {top:0;left:100px;background-color:#000;}.circle-02 {bottom:0;right:100px;background-color:#fff;}.circle-01:after,.circle-02:after {width:75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}.circle-01:after {top:60px;left:55px;background-color:#fff;}.circle-02:after {bottom:60px;right:55px;background-color:#000;}@keyframes rotation {    0% {transform:rotate(0deg);}    100% {transform:rotate(360deg);}}@-webkit-keyframes rotation {    0% {-webkit-transform:rotate(0deg);}    100% {-webkit-transform:rotate(360deg);}}@-moz-keyframes rotation {    0% {-moz-transform:rotate(0deg);}    100% {-moz-transform:rotate(360deg);}}</style></head><body><div class="box-taiji">    <div class="circle-01"></div>    <div class="circle-02"></div></div></body></html>

 

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
javascript 動(dòng)圖太極
純CSS設(shè)置Checkbox復(fù)選框控件的樣式 | 朽木博客
改變默認(rèn)滾動(dòng)條樣式(主要用于移動(dòng)端)
A Beginner’s Introduction to CSS Animation
CSS動(dòng)畫實(shí)例:旋轉(zhuǎn)的葉片
移動(dòng)端 css實(shí)現(xiàn)自適應(yīng)正圓 ( 寬高隨著手機(jī)屏幕寬度自適應(yīng) )
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服