利用css3画个同心圆示例代码


Posted in HTML / CSS onJuly 03, 2017

基本思路

首先你得画三个圆吧,那三个圆怎么重叠到一块呢?这个就得靠-margin来控制了。

<div id="tongxin">
    <div id='t1'></div>
    <div id="t2"></div>
    <div id="t3"></div>
</div>

css

#t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:-125px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:-100px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

结果

利用css3画个同心圆示例代码
 

代码分析

怎么理解上述代码呢?比如t2中的margin-left:-125px。margin-top:25px; 看下面这个图
 

-125代表向左移动125px,25代表向下移动25px。为啥是左移动125px呢,这个就看你初中数学学的怎样了。两个圆心之间的距离嘛。大圆半径75px,中圆半径 50px。也就是说大圆的和小圆的圆心距离是125px。

垂直方向移动25px是由于垂直方向的圆心距是25px。

利用css3画个同心圆示例代码

总结

理解margin数值代表的移动方向这个事情就搞定了!

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 #HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python 图片验证码代码分享
2012/07/04 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
使用Python生成XML的方法实例
2017/03/21 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
什么是Python包的循环导入
2020/09/08 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
幼儿园教师请假制度
2014/01/16 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
人事局接收函
2015/01/30 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript