css 制作一个可以旋转的水泵效果

JiaLin_Denny2025-06-20 13:37

如图，项目里面有一个小图片可以旋转，达到看起来像是一个在工作的水泵。我使用css旋转动画实现。

一、HTML结构部分

html 复制代码

<div className="ceshixuanzhuan">
  <img src={lunkuo} className="lunkuo"/>
  <img src={yepian} className="yepian"/>
</div>

二、css样式和动画部分

css 复制代码

.ceshixuanzhuan{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.lunkuo{
	width: 50px;
	height: 50px;
	display: block;
}
.yepian{
	width: 30px;
	height: 30px;
	display: block;
	margin-left: -40px;
	animation: rotate 5s linear infinite;
}
@keyframes rotate {
	from {
	  transform: rotate(0deg);
	  /* 从0度开始 */
	}

	to {
	  transform: rotate(360deg);
	  /* 旋转360度 */
	}
}