css3如何实现元素环绕中心点布局(代码示例)

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月31日22:24:58 评论 32 views

本篇文章给大家带来的内容是关于css3如何实现元素环绕中心点布局(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果如图:

3940802162-5c2a1c5debbc6_articlex.png

代码实现:

<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>

以上就是css3如何实现元素环绕中心点布局(代码示例)的详细内容,更多请关注css教程其它相关文章!

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月31日22:24:58
  • 转载请务必保留本文链接:https://www.qieseo.com/365223.html
HTML5和Webkit实现树叶飘落动画 H5教程

HTML5和Webkit实现树叶飘落动画

HTML5和Webkit在一起会实现什么样的动画呢?本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧,希望能帮组到大家。 实现如图所示的东西效果...
html5怎样做出图片转圈的动画效果 H5教程

html5怎样做出图片转圈的动画效果

这次给大家带来html5怎样做出图片转圈的动画效果,h5做出图片转圈的动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。 <img src="images/circle.png" alt...
HTML和CSS3中的2D、3D结合实现动画效果 html教程

HTML和CSS3中的2D、3D结合实现动画效果

这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 虽然我们我们在前端工作中,对于2D、3D动画效果一般来说...
关于css3弹性盒模型的介绍 css教程

关于css3弹性盒模型的介绍

这篇文章主要介绍了关于css3弹性盒模型的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: