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中的选择符
Oct 17 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
tab栏切换原理
2017/03/22 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python实现ipsec开权限实例
2014/11/11 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
高效使用Python字典的清单
2018/04/04 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python判断元素是否存在的实例方法
2020/09/24 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
汽车销售求职自荐信
2013/10/01 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
海飞丝广告词
2014/03/20 职场文书
文明之星事迹材料
2014/05/09 职场文书
公司开除员工通知
2015/04/22 职场文书
公司费用报销管理制度
2015/08/04 职场文书
教师外出学习心得体会
2016/01/18 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS