利用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属性汇总
Jul 21 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP导入导出Excel代码
2015/07/07 PHP
Django 中 cookie的使用
2017/08/17 PHP
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
人工神经网络算法知识点总结
2019/06/11 Python
python中while和for的区别总结
2019/06/28 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
两道JAVA笔试题
2016/09/14 面试题
主办会计岗位职责
2014/03/13 职场文书
年终总结会主持词
2014/03/25 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
学习雷锋标语
2014/06/25 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
HTML基本元素标签介绍
2022/02/28 HTML / CSS
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript