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


Posted in HTML / CSS onJanuary 15, 2019

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

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

HTML / CSS 相关文章推荐
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
css3 选择器
May 11 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 #HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 #HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 #HTML / CSS
10分钟入门CSS3 Animation
Dec 25 #HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 #HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 #HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 #HTML / CSS
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
smarty基础之拼接字符串的详解
2013/06/18 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
详解JS面向对象编程
2016/01/24 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JS实现留言板功能
2017/06/17 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python分支结构(switch)操作简介
2018/01/17 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python获取txt文件词向量过程详解
2019/07/05 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
销售主管岗位职责范本
2014/02/14 职场文书
降消项目实施方案
2014/03/30 职场文书
公司请假条格式
2014/04/11 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
优秀高中学生评语
2014/12/30 职场文书
先进教师个人总结
2015/02/11 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
公司人事管理制度
2015/08/05 职场文书
古诗之感恩老师
2019/10/24 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
关于Python使用turtle库画任意图的问题
2022/04/01 Python