常用网站设计缩略图百度seo快速排名

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

一、HTML结构部分

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

二、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度 */}
}