CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介： 大家好五一快乐，我是痴心阿文，你们的学友哥，今天给大家分享一个CSS3动画制作的旋转风车！ 📃个人主页：痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主 🔥本文简介：css3的旋转风车，适合新人学习 💖如果觉得博主的文章还不错的话，请👍三连支持一下博主哦🤞
话不多说，直接上代码 ，肝着！🍉
img{
width: 200px;
height: 200px;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(30deg);
}
60%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
img:hover{
animation: rotate 0.5s linear infinite;
}🍉CSS3动画制作的旋转风车完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画制作的旋转风车</title>
<style>
img{
width: 200px;
height: 200px;
}
/*动画部分*/
@keyframes rotate{
0%{
transform: rotate(0deg);
}
30%{
transform: rotate(30deg);
}
60%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
/*动画部分 鼠标移入*/
img:hover{
animation: rotate 0.5s linear infinite;
}
</style>
</head>
<body>
<img src="./fengche.jpg" alt="">
</body>
</html>🍉 下面是一个风车图片，大家可以下载图片结合代码试试看。
🍓结束语🏆 🍉 CSS3还可以做好多东西，后面会写一些好玩的有趣的，最后祝大家节日快乐，学习并快乐着！！！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
