CSS3动画制作的旋转风车，大家五一节日快乐

最新推荐文章于 2024-04-03 04:23:42 发布

痴心阿文

最新推荐文章于 2024-04-03 04:23:42 发布

阅读量1.1k

点赞数 8

分类专栏： CSS 前端文章标签： css3 css html

本文链接：https://blog.csdn.net/zhangxueyou2223/article/details/124535014

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

✅作者简介：

大家好五一快乐，我是痴心阿文，你们的学友哥，今天给大家分享一个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>