用css做一个小风车

最新推荐文章于 2024-04-22 16:27:15 发布

亿米酒酒

最新推荐文章于 2024-04-22 16:27:15 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_44484452/article/details/86744181

本文介绍如何利用CSS创建一个由四个圆角矩形叶片组成的动态旋转风车效果，通过CSS关键帧动画实现风车的旋转动画，打造一个简单的视觉效果。

直接设置一个大的正方形盒子，然后在里面放四个盒子充当叶片

<div class="contenr">
	<div class="bix1"></div><!--叶片1-->
	<div class="bix2"></div><!--叶片2-->
	<div class="bix3"></div><!--叶片3-->
	<div class="bix4"></div><!--叶片4-->
</div>

把对应三个角设置为圆角，这样叶片完成，同时给外面盒子设置关键帧动画实现叶片旋转，这样一个简单的风车就完成了

<style>
	.contenr{
		width:200px;
		height: 200px;
		margin: 50px auto;
		display: flex;
		flex-wrap: wrap;
		position:relative;
		animation: box 1s infinite linear;
	}
	@keyframes box{
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	.banzhi{
		width: 13px;
		height: 200px;
		background: #E19517;
		z-index: -1;
		margin: -100px auto;
	}
	.bix1,.bix2,.bix3,.bix4{
		width: 100px;
		height: 100px;
	}
	.bix1{
		background