CSS做个五颜六色的风车

最新推荐文章于 2022-08-09 09:25:15 发布

妄痴梦中

最新推荐文章于 2022-08-09 09:25:15 发布

阅读量259

点赞数 1

分类专栏： html和css 文章标签： css css3

本文链接：https://blog.csdn.net/an_gentle_killer/article/details/115415515

版权

html和css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做个简单的风车

身为一个Java小白会用css做点风车不过分吧
 Pay attention to：this is living 风车，不是 lifeless 的风车*

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/new_file.css" />
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="box1 box2"></div>
				<div class="box1 box3"></div>
				<div class="box1 box4"></div>
				<div class="box1 box5"></div>/*四片叶子做完了*/
			</div>
			<div class="gan"></div>/*这是杆子*/
		</div>
	</body>
</html>

这是名为 new_file.css的css文件

.container {
	border: 0px solid red;
	width: 700px;
	height: 600px;
	margin: 30px auto;
}

.box {
	border: 0px solid red;
	width: 200px;
	height: 200px;
	margin: 20px auto;

	animation: animation1 2s linear infinite;
	/* 名称/一周期时间/线性变化/无线 */
}

.box1 {
	width: 100px;
	height: 50px;
	border-radius: 50px 50px 0 0;
	position: relative;
}

@keyframes animation1 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.box2 {
	border: 0px solid greenyellow;
	background-color: blue;
	transform: rotate(90deg);
	position: relative;
	top: 25px;
	left: 75px;

}

.box3 {
	border: 0px solid blue;
	background-color: red;
	transform: rotate(180deg);
	position: relative;
	left: 100px;
	top: 50px;

}

.box4 {
	border: 0px solid red;
	background-color: orangered;
	transform: rotate(270deg);
	position: relative;
	left: 25px;
	top: 25px;
}

.box5 {
	border: 0px solid orangered;
	background-color: greenyellow;
	transform: rotate(0deg);
	position: relative;
	/* 相对位置 */
	bottom: 100px;
}

.gan {
	border: 2px solid saddlebrown;
	width: 10px;
	height: 400px;
	background-color: #008000;
	position: relative;
	left: 345px;
	bottom: 121px;
	z-index: -1;
}

这是个会动的风车，自行脑补吧，哈哈（其实是因为我不会放动图）

注：这个风车会 rotating，自行脑补吧，哈哈（其实是因为我不会放动图）

妄痴梦中

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS做个五颜六色的风车

身为一个Java小白会用css做点风车不过分吧Pay attention to：this is living 风车，不是 lifeless 的风车这是html文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/new_f
复制链接

扫一扫