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度 */
	}
}
相关推荐
奕辰杰4 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny5 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
路光.6 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!6 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作7 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹7 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz8 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°8 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南8 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔9 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js