CSS3实现中心点布局的效果的方法

发布时间：2023-10-25 14:41:16 所属栏目：语言来源：

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

代码实现：

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

本文介绍了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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!