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

  发布时间:2019-01-15 15:43:20   作者:heath_learning   我要评论

这篇文章主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • css3实现3D文本悬停改变效果的示例代码

    这篇文章主要介绍了css3实现3D文本悬停改变效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-16
  • css3实现元素环绕中心点布局的方法示例

    这篇文章主要介绍了css3实现元素环绕中心点布局的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2019-01-15
  • CSS3改变浏览器滚动条样式

    浏览器滚动条太宽,太丑,影响日常开发怎么办,本文介绍了如何使用CSS3改变浏览器滚动条样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2019-01-04
  • 浅谈CSS3 动画卡顿解决方案

    今天主要介绍一下CSS3 动画卡顿解决方案,原因就是主线程和合成线程的调度不合理。本文详解的介绍了解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起
    2019-01-02
  • 纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    本文分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-29
  • 10分钟入门CSS3 Animation

    本篇介绍的animation属性和传统的动画制作一样,能控制帧的每一步,制作出更强大的动画效果。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2018-12-25
  • 10分钟理解CSS3 Grid布局

    Grid做前端的同学应该都很熟悉了,这篇文章主要介绍了10分钟理解CSS3 Grid布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-20
  • 10分钟理解CSS3 FlexBox弹性布局

    这篇文章主要介绍了10分钟理解CSS3 FlexBox弹性布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-20
  • 详解如何在css3打包后自动追加前缀插件:autoprefixer

    这篇文章主要介绍了详解如何在css3打包后自动追加前缀插件:autoprefixer的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-18
  • css3实现信纸/同学录效果的示例代码

    这篇文章主要介绍了css3实现信纸/同学录效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-11

最新评论