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度 */
	}
}
相关推荐
谢泽豪几秒前
解决 uniapp 修改index.html文件不生效的问题
前端·uni-app
袁煦丞几秒前
【黑科技指南】自托管私人导航站Dashy:cpolar内网穿透实验室第476个成功挑战
前端·程序员·远程工作
heartmoonq4 分钟前
关于前端监控用户行为导致的报错
前端
已读不回1434 分钟前
告别痛苦的主题切换!用一个插件解决 Tailwind CSS 多主题开发的所有烦恼
前端·架构
pepedd8645 分钟前
🚀Webpack 从入门到优化,一文全掌握!
前端·webpack·trae
TimelessHaze6 分钟前
【面试考点】从URL输入到页面展示
前端·trae
玲小珑7 分钟前
LangChain.js 完全开发手册(一)AI 应用开发入门
前端·langchain·ai编程
excel8 分钟前
前端必修:从表单基础到富文本编辑,一文吃透 HTML 表单编程与交互
前端
袁煦丞10 分钟前
JuiceSSH你的口袋里的Linux操控台:cpolar内网穿透实验室第530个成功挑战
前端·程序员·远程工作
鹏多多14 分钟前
深入解析vue的transition过渡动画使用和优化
前端·javascript·vue.js