您好,登錄后才能下訂單哦!
如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
1、實(shí)現(xiàn)以下效果,且使用純DIV+CSS
附加說明:
1、帶蝴蝶的粉色圓圈是一張圖片
2、中間的“4色花”是由4個半圓通過旋轉(zhuǎn)生成的,每個半圓的直徑為180px
1、準(zhǔn)備素材:當(dāng)前案例的素材為帶蝴蝶的粉色圓圈
2、創(chuàng)建好index.html,寫好架構(gòu),架構(gòu)如何分析呢
思路分析:
1、目標(biāo)外層是一個div,div的背景圖片為一個帶蝴蝶的粉色圓圈
2、div內(nèi)包含一朵4色花,所以這朵花由5個部分組成,4個花瓣+1個白色小孔心
好,先按照分析,寫好思路,暫時不管css的實(shí)現(xiàn)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS旋轉(zhuǎn)案例</title> </head> <body> <div class="wrapper"> <div class="bottole"> <div class="leaf leaf2"></div> <div class="leaf leaf3"></div> <div class="leaf leaf4"></div> <div class="leaf"></div> <div class="smallcircle"></div> </div> </div> </body> </html>
3、寫樣式 ,創(chuàng)建css文件夾,里面新建index.css
思路分析:
.container * 公共樣式
1、定義公共樣式
.wrapper *{ margin:0; padding:0; }
.bottole 外層div設(shè)置
1、因?yàn)橐WC背景圖片完全顯示出來,所以一定要大于背景圖片
2、背景圖片不能重復(fù)
.bottole{ width: 640px; height: 420px; background-image: url(../images/pao.png); background-repeat: no-repeat; background-position-x: 40px; background-position-y: -35px; }
.leaf 半圓 葉子
1、因?yàn)榘雸A直徑為180,所以高度肯定是90px,然后半圓我們可以通過border-radius實(shí)現(xiàn),且默認(rèn)顏色我們就定義為橙色,為了讓4個半圓重疊在一起,就必須使用position:absolute,然后需要設(shè)置margin-left,margin-top讓它的位置呈現(xiàn)目標(biāo)效果(這里我們可以通過不斷調(diào)試得出)
.wrapper .leaf { width: 180px; height: 90px; border-radius: 180px 180px 0 0; background-color: orange; position: absolute; margin-left: 100px; margin-top: 150px; }
.leaf2 葉子單獨(dú)設(shè)置
1、該葉子的顏色為綠色,且需要旋轉(zhuǎn)90度
.wrapper .leaf2 { background: green; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.leaf3 葉子單獨(dú)設(shè)置
1、該葉子的顏色為藍(lán)色,且需要旋轉(zhuǎn)180度
.wrapper .leaf3 { background: blue; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.leaf4 葉子單獨(dú)設(shè)置
1、該葉子的顏色為紅色,需要旋轉(zhuǎn)的角度為270度
.wrapper .leaf4 { background: red; -webkit-transform: rotate(270deg); transform: rotate(270deg); }
小圓孔 花心設(shè)置
1、小圓孔大小為20,我們可以讓一個div大小都為20,然后border-radius也為20就可以制作成一個圓
2、背景色為白色
3、為了讓孔位于花朵中心,我們需要設(shè)置margin-left,margin-top
.smallcircle{ width: 20px; height: 20px; background-color: white; border-radius: 20px; position: absolute; margin-left: 180px; margin-top: 190px; }
好,到目前為止,我們把想到的樣式全部寫好了,具體不對,我們再來修改
目前為止,css所有內(nèi)容如下:
.wrapper *{ margin:0; padding:0; } .bottole{ width: 640px; height: 420px; border-radius: 400px; background-image: url(../images/pao.png); background-repeat: no-repeat; background-position-x: 40px; background-position-y: -35px; } .wrapper .leaf { width: 180px; height: 90px; border-radius: 180px 180px 0 0; background-color: orange; position: absolute; margin-left: 100px; margin-top: 150px; } .wrapper .leaf2 { background: green; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .wrapper .leaf3 { background: blue; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .wrapper .leaf4 { background: red; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .smallcircle{ width: 20px; height: 20px; background-color: white; border-radius: 20px; position: absolute; margin-left: 180px; margin-top: 190px; }
將css引入index.html中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS旋轉(zhuǎn)案例</title> <link href="css/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="bottole"> <div class="leaf leaf2"></div> <div class="leaf leaf3"></div> <div class="leaf leaf4"></div> <div class="leaf"></div> <div class="smallcircle"></div> </div> </div> </body> </html>
運(yùn)行效果如下:
關(guān)于如何用CSS3實(shí)現(xiàn)元素旋轉(zhuǎn)效果問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。