?如圖,項目里面有一個小圖片可以旋轉,達到看起來像是一個在工作的水泵。我使用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度 */}
}