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

如图,项目里面有一个小图片可以旋转,达到看起来像是一个在工作的水泵。我使用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度 */
	}
}
相关推荐
刘坤15几秒前
封装axios二方包
前端·http
饮茶三千1 分钟前
几个在开发中起大作用的CSS新特性!
前端·css
mrsk1 分钟前
React useContext 实战指南:打造主题切换功能
前端·react.js·面试
然我2 分钟前
闭包在类封装中的神技:实现真正安全的私有属性,面试必懂的封装技巧
前端·javascript·面试
小公主2 分钟前
别再用 props 一层层传了!React useContext 真正用法与 useState 深度解析
前端·react.js
帅夫帅夫4 分钟前
深入理解 JavaScript 的 const:从基础到内存原理
前端
用户名1234 分钟前
我写了个脚本,让前端彻底告别 Swagger 手动搬砖
前端
爱编程的喵7 分钟前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓7 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
风无雨39 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频