CSS 用一个div写个旋转的齿轮（maybe船舵）

本文链接：https://blog.youkuaiyun.com/MoveLikeRabbit/article/details/78107443

目标：用css写出如下图形

这里写图片描述

思路

分析一下，要写出这个图形并不难，我数数，总共有4个同心圆，和8个圆角矩形，需要8+4=12个DOM节点，似乎离一个还有很远
如果用border写同心圆，可以减少2个圆
如果加上before 和 after 伪类又可以减少2个节点
如果巧用box-shadow ，一个div 足矣！

第一步，画出同心圆

**知识点1 **：box-shadow
语法：none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
取值:
inset 默认阴影在边框外。使用inset变成内阴影，背景之上内容之下

offset-x offset-y 分别设置水平和垂直偏移量

blur-radius 模糊半径，值越大，模糊面积越大，阴影就越大越淡

spread-radius 阴影大小取正值时，阴影扩大；取负值

color 阴影的颜色

div{
		width: 200px;
		height: 200px;
		/* 设置div的box-shadow */
		box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;
		margin: 200px auto;
		position: relative;
		border-radius: 50%;
	}

效果如图：1，2，3分别对应三个box-shadow的值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26CJNPpc-1586505628477)(https://img-blog.youkuaiyun.com/20170926212751552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTW92ZUxpa2VSYWJiaXQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]

第二步，构建第一个伪类

div::before{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 10px;
		background: orange;
	}

橘黄色的小圆角矩形就被放在 div的左上角了
这里写图片描述

第三步，用box-shadow画出4个锯齿

/* 计算x 和 y的 偏移量 */
box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;

很轻松的得到了下面的图
这里写图片描述

第四步，用同样的方法画出构建第二个伪类，再画4个锯齿

这个有点偷懒，由于要转动起来，我的第二个伪类跟第一个伪类写的一模一样

div::after{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 10px;
		background: blue;
		position: absolute;
		/* 这里加上定位，让before和after位置一样，同时给div定位relative */
		box-shadow: 75px -195px 0 darkblue,75px 345px 0 darkblue,-195px 75px 0 darkblue,345px 75px 0 darkblue;
	}

蓝色的块覆盖了刚才写的黄色的块
这里写图片描述

第五步，给伪类添加动画

先定义一个动画

@keyframes rotate{
		form{
			transform: rotate(0);
		}to{
			transform: rotate(360deg);
		}
	}

给before 和 after 添加动画,同时让after 动画延迟1/8的动画时长，等转动起来就完成了！

/* before的动画 */
animation: rotate2 10s linear infinite;
/* after的动画 */
animation: rotate2 10s linear infinite 0.15s;

这里写图片描述

最后完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div></div>
</body>
<style>
	body{
		background: skyblue;
	}
	div{

		width: 200px;
		height: 200px;
		box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;
		margin: 200px auto;
		position: relative;
		border-radius: 50%;
	}
	div::before{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		border-radius: 10px;
		box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;
		animation: rotate 10s linear infinite;
		/* 旋转点为同心圆的圆心 */
		transform-origin: 100px 100px;
	}
	div::after{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		border-radius: 10px;
		box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;
		animation: rotate2 10s linear infinite 1.25s;
		transform-origin: 100px 100px;
	}
	@keyframes rotate{
		form{
			transform: rotate(0);
		}to{
			transform: rotate(360deg);
		}
	}
	@keyframes rotate2{
		form{
			transform: rotate(45deg);
		}to{
			transform: rotate(405deg);
		}
	}
</style>
</html>

##but, 还是不够完美，现在实现的效果要过 1.5 秒后才能before 和 after 一起转圈圈，如果要同步转怎么办嘞
啊~好困，but not perfect，接着写吧 TT

第一步，重新写after 这次我们提前把8个齿轮的位置摆好，再让他们旋转

/* 
	1.把after定位到圆心的位置，因为后面要旋转，放在其他的位置不好计算shadow的位置
	2.把旋转点也 设置在 圆心的位置
	3.将after 以圆心为旋转点 旋转45°
	4.要注意哦,shadow 的 x 和 y 偏移量 的坐标轴也旋转了45°
 */
div::after{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		left: 75px;
		top: 75px;
		position: absolute;
		transform: rotate(45deg);
		border-radius: 10px;
		transform-origin: 25px 25px;
		box-shadow: -270px 0px 0 black,270px 0px 0 black,0px -270px 0 black,0px 270px 0 black;
	}

这里写图片描述
再给after设置动画rotate2

 animation: rotate2 10s linear infinite;

然而转着转着就变成了这样
这里写图片描述
好像个靶子，感觉萌萌哒

第二步：给after设置新的动画

/* 还记得我们给 after 已经璇转过45°了吗？这里就不能共用一个动画了 */
@keyframes rotate2{
		form{
			transform: rotate(45deg);
		}to{
			transform: rotate(405deg);
		}
	}

最后贴出完整代码后面没有了啊，我看一眼，真的没啦~~ <(￣▽￣)/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div></div>
</body>
<style>
	body{
		background: skyblue;
	}
	div{

		width: 200px;
		height: 200px;
		box-shadow: 0px 0px 0px 50px  black , 0px 0px 0px 100px  skyblue , 0px 0px 0px 150px  black;
		margin: 200px auto;
		position: relative;
		border-radius: 50%;
	}
	div::before{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		border-radius: 10px;
		box-shadow: 75px -195px 0 black,75px 345px 0 black,-195px 75px 0 black,345px 75px 0 black;
		animation: rotate 10s linear infinite;
		transform-origin: 100px 100px;
	}
	div::after{
		content: "";
		display: block;
		width: 50px;
		height: 50px;
		left: 75px;
		top: 75px;
		position: absolute;
		transform: rotate(45deg);
		border-radius: 10px;
		transform-origin: 25px 25px;
		background: red;
		box-shadow: -270px 0px 0 black,270px 0px 0 black,0px -270px 0 black,0px 270px 0 black;
		animation: rotate 10s linear infinite;
		
	}
	@keyframes rotate{
		form{
			transform: rotate(0);
		}to{
			transform: rotate(360deg);
		}
	}
	@keyframes rotate2{
		form{
			transform: rotate(45deg);
		}to{
			transform: rotate(405deg);
		}
	}
</style>
</html>