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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 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
php实现检查文章是否被百度收录
2015/01/27 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
js正确获取元素样式详解
2009/08/07 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python日期相关操作实例小结
2019/06/24 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python selenium操作cookie的实现
2020/03/18 Python
Python 列表反转显示的四种方法
2020/11/16 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
高二政治教学反思
2014/02/01 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2015年法务工作总结范文
2015/05/23 职场文书