您现在的位置是：网站首页> 编程资料编程资料

利用css3画个同心圆示例代码纯CSS3实现炫酷圆形主菜单动画展开收起特效源码纯css3实现绚丽圆点背景动画特效源码HTML5结合CSS3实现的光感圆圈动画特效源码纯css3实现的圆形从中心向四周扩散动画效果源码CSS3 画基本图形，圆形、椭圆形、三角形等

2023-10-21 277人已围观

简介这篇文章主要给大家介绍了利用css3如何画个同心圆的相关资料，文中给出了详细的示例代码，并对代码进行了详细的解析方法大家理解和学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

基本思路

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

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; }

结果