利用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 相关文章推荐
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js获取div高度的代码
2008/08/09 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python书单 不将就
2017/07/11 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python版名片管理系统
2018/11/30 Python
python的依赖管理的实现
2019/05/14 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
大四学生毕业自荐信
2013/11/07 职场文书
建筑设计师岗位职责
2013/11/18 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
绿里奇迹观后感
2015/06/15 职场文书
技术转让协议书
2016/03/19 职场文书
golang json数组拼接的实例
2021/04/28 Golang