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中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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
人族 Terran 基本策略
2020/03/14 星际争霸
php自定义的格式化时间示例代码
2013/12/05 PHP
php生成zip文件类实例
2015/04/07 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php远程下载类分享
2016/04/13 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python tornado微信开发入门代码
2018/08/24 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
行政总经理岗位职责
2013/12/05 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android