本篇文章给大家带来的内容是关于css实现圆与边框的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
实现效果：
代码
html:
css:
#box { height:200px; width:200px; } .circle-out{ height: inherit; width: inherit; display: inline-block; text-align: center; border: 20px solid blue; border-radius: 50%; } /* 绘制弧形 */ .circle-part{ display: inline-block; position: relative; width:0px; height: 0px; border-radius: 50%; border: 100px solid #0000ff05; border-top: 100px solid blue; top: -220px; left: 20px; transform: rotate(0deg); animation: run-part 5s infinite; } .part1{ height: 0px; width: 0px; border-radius: 50%; border:100px solid #fafafa; border-top: 100px solid #ff000000; position: relative; top: -420px; left: 20px; transform: rotate(45deg); animation: run-part1 5s infinite; } .circle-inner{ height: 0px; width: 0px; display: inline-block; border-radius: 50%; border: 20px solid blue; top: 80px; position: relative; z-index: 1000; } @-webkit-keyframes run-part1{ 0%{ transform: rotate(45deg); } 100% { transform: rotate(405deg); } } @-webkit-keyframes run-part{ 0%{ transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
实现思路
1 图形构成
从外观看到，该图形大致由：外圆，内圆及构扇形构成。
1.1 外圆
在本示例中，主要采用一个p,设置高与宽，背景不设置或白色。设置 border-radius为50%外圆圈，使用边框构成从而形成外圈。
.circle-out{ height: inherit; width: inherit; border: 20px solid blue; display: inline-block; border-radius: 50%; text-align: center;}
效果图 ：
1.2内圆
内圆很简单，也是使用border完成的圆，设置boder-radius:50%实现的圆的效果，最后就是一个定位的事情。
1.3扇形
扇形，在本示例中，实现的思路也是拼凑，外加旋转，利用边框border实现。
立即学习“前端免费学习笔记（深入）”；
.circle-part{ //(1) display: inline-block; width:0px; height: 0px; //(2) border-radius: 50%; border: 100px solid #0000ff05; border-top: 100px solid blue; //(3) position: relative; top: -220px; left: 20px; //(4) transform: rotate(0deg); animation: run-part 5s infinite; }
如上代码：
分为（1）、（2）、（3）、（4）部分，出去固定形状、动画外，比较重要的就在于（2）部分。
先绘制出1/4的圆（边框）。其他另外3/4的扇形以透明绘制。
相同的，另外使用另外一个圆进行相同的处理，这样两个圆就能重叠在一起，唯一不同的是：第二个圆设置那3/4圆作为白色，1/4设置为透明色。
这时，呈现的为1/4的扇形，背景为blue,而因为透明的原因1/4是完全暴露的。
最后，由于最后的圆为顶层元素，所以当顶层元素发生旋转时，蓝色的扇形部分就会被顶层元素那3/4的扇形区域所遮蔽。从而达到最后的效果。
代码最后加上自己的动画，实现最后的效果。
以上就是css实现圆与边框旋转动画的代码实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611848.html
微信扫一扫 
支付宝扫一扫 
