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度 */
	}
}
相关推荐
你的人类朋友2 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API3 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx3 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶3 小时前
webpack学习
前端·学习·webpack
excel4 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年4 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人5 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java6 小时前
CSS网格布局
前端·css·html
木易 士心8 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js