css3实现元素环绕中心点布局的方法示例

css3实现元素环绕中心点布局的方法示例,第1张

css3实现元素环绕中心点布局的方法示例

本文介绍了css3实现元素环绕中心点布局的方法示例,分享给大家,具体如下:

效果如图:
 

代码实现:

<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{
        /* 这里一定要绝对定位,这样位置才能铺开来 */
        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控制方向,每个元素旋转30度,12个元素刚好360度。


translateY控制每个元素距中心点的距离 */ 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>
    <div class="center-point"></div>
    <div class="surround-box">
        <div class="circle circle1">1</div>
        <div class="circle circle2">2</div>
        <div class="circle circle3">3</div>
        <div class="circle circle4">4</div>
        <div class="circle circle5">5</div>
        <div class="circle circle6">6</div>
        <div class="circle circle7">7</div>
        <div class="circle circle8">8</div>
        <div class="circle circle9">9</div>
        <div class="circle circle10">10</div>
        <div class="circle circle11">11</div>
        <div class="circle circle12">12</div>
    </div>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/617151.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-15
下一篇 2022-04-15

发表评论

登录后才能评论

评论列表(0条)

保存