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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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的计数器程序
2006/10/09 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python求最大值最小值方法总结
2019/06/25 Python
python word转pdf代码实例
2019/08/16 Python
Python devel安装失败问题解决方案
2020/06/09 Python
python如何安装下载后的模块
2020/07/03 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
销售团队获奖感言
2014/08/14 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
mysql的单列多值存储实例详解
2022/04/05 MySQL