欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3怎樣實(shí)現(xiàn)元素環(huán)繞中心點(diǎn)布局

這篇文章主要介紹css3怎樣實(shí)現(xiàn)元素環(huán)繞中心點(diǎn)布局，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元介休做網(wǎng)站,已為上家服務(wù),為介休各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

代碼實(shí)現(xiàn)：

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.surround-box,

.center-point{

position:absolute;

top:50%;

left:50%;

width:20px;

height:20px;

margin-left:-10px;

margin-top:-10px;

border-radius:50%;

background-color:#000;

}

.circle{

/*這里一定要絕對(duì)定位，這樣位置才能鋪開(kāi)來(lái)*/

position:absolute;

top:-10px;

left:-10px;

width:40px;

height:40px;

line-height:40px;

border-radius:50%;

text-align:center;

color:#fff;

}

.circle1{

background-color:red;

/*rotateZ控制方向，每個(gè)元素旋轉(zhuǎn)30度，12個(gè)元素剛好360度。translateY控制每個(gè)元素距中心點(diǎn)的距離*/

transform:rotateZ(30deg)translateY(80px);

}

.circle2{

background-color:orange;

transform:rotateZ(60deg)translateY(80px);

}

.circle3{

background-color:yellow;

transform:rotateZ(90deg)translateY(80px);

}

.circle4{

background-color:green;

transform:rotateZ(120deg)translateY(80px);

}

.circle5{

background-color:seagreen;

transform:rotateZ(150deg)translateY(80px);

}

.circle6{

background-color:blue;

transform:rotateZ(180deg)translateY(80px);

}

.circle7{

background-color:purple;

transform:rotateZ(210deg)translateY(80px);

}

.circle8{

background-color:lightsalmon;

transform:rotateZ(240deg)translateY(80px);

}

.circle9{

background-color:deeppink;

transform:rotateZ(270deg)translateY(80px);

}

.circle10{

background-color:lightyellow;

transform:rotateZ(300deg)translateY(80px);

}

.circle11{

background-color:lightgreen;

transform:rotateZ(330deg)translateY(80px);

}

.circle12{

background-color:lightslategrey;

transform:rotateZ(360deg)translateY(80px);

}

</style>

<body>

<divclass="center-point"></div>

<divclass="surround-box">

<divclass="circlecircle1">1</div>

<divclass="circlecircle2">2</div>

<divclass="circlecircle3">3</div>

<divclass="circlecircle4">4</div>

<divclass="circlecircle5">5</div>

<divclass="circlecircle6">6</div>

<divclass="circlecircle7">7</div>

<divclass="circlecircle8">8</div>

<divclass="circlecircle9">9</div>

<divclass="circlecircle10">10</div>

<divclass="circlecircle11">11</div>

<divclass="circlecircle12">12</div>

</div>

</body>

以上是“css3怎樣實(shí)現(xiàn)元素環(huán)繞中心點(diǎn)布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：css3怎樣實(shí)現(xiàn)元素環(huán)繞中心點(diǎn)布局
URL鏈接：http://chinadenli.net/article20/gdjijo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、微信小程序、建站公司、商城網(wǎng)站、網(wǎng)站維護(hù)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)