本文主要是介绍利用css制作旋转八卦图解析实战学习css定位伪元素动画的使用。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图展示
思路解析:
利用div定位，css伪类元素befor ，after实现，以及圆角，最后动画效果旋转进行实现。首先先给div做两个半圆，通过圆角属性，和边框加粗方式，同理再通过伪元素给div定位出一左一右两个圆调节背景颜色，长度计算可知两个小圆直径等于大圆的直径。
实现代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style>*{margin: 0px;padding: 0px;}#gossip{position: fixed;top: 0px;left: 45%;bottom: 0px;margin: auto;width: 200px;height: 100px;border-radius:100px;border-top: 3px solid #000000;border-right: 3px solid #000000;border-bottom: 100px solid #000000;border-left: 3px solid #000000;animation: xz 1s linear infinite; /*动画设置*/background-color: #FFFFFF;}#gossip::before{content: "";width: 20px;height: 20px;border:40px solid #FFFFFF;position: absolute;right: 0px;top: 50px;border-radius: 100px;background-color: #000000;}#gossip::after{content: "";width: 20px;height: 20px;border: 40px solid #000000;position: absolute;left: 0px;top: 50px;border-radius: 100px;background-color: #FFFFFF;}@keyframes xz {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style>
</head>
<body style="background-color: #007AFF"><div id="gossip"></div>
</body>
</html>
结束
祝福看到的您事事有成，希望您动一下鼠标帮博主***点个赞谢谢。***
这篇关于利用css制作旋转八卦图解析实战学习css定位伪元素动画的使用。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
