利用css制作旋转八卦图解析实战学习css定位伪元素动画的使用。

最新推荐文章于 2023-03-10 17:02:49 发布

beliveぃmyself

最新推荐文章于 2023-03-10 17:02:49 发布

阅读量622

点赞数 4

分类专栏： css3 文章标签：前端 css 动画

本文链接：https://blog.csdn.net/h__z__q/article/details/121537010

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图展示

思路解析:

  利用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>

结束

  祝福看到的您事事有成，希望您动一下鼠标帮博主
                                          ***点个赞谢谢。***

beliveぃmyself

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用css制作旋转八卦图解析实战学习css定位伪元素动画的使用。

首先看图： ![效果图展示](https://img-blog.csdnimg.cn/f3aa6982c43642f9bf589506a2994656.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYmVsaXZl44GDbXlzZWxm,size_17,color_FFFFFF,t_70,g_se,x_16#pic_center) 思路解析: 利用div定位，
复制链接

扫一扫

专栏目录