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 相关文章推荐
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 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
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python3实现字符串操作的实例代码
2019/04/16 Python
基于Python的PIL库学习详解
2019/05/10 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
金融专业个人求职信范文
2013/11/28 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
廉洁自律承诺书
2014/03/27 职场文书
党校个人总结
2015/03/04 职场文书
电影建国大业观后感
2015/06/01 职场文书
入学证明
2015/06/23 职场文书
毕业典礼致辞
2015/07/29 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技