让风车转动起来

最新推荐文章于 2023-03-24 22:06:57 发布

青柠檬檬哒

最新推荐文章于 2023-03-24 22:06:57 发布

阅读量1.6k

点赞数 2

文章标签：转动起来的风车

本文链接：https://blog.csdn.net/weixin_44543252/article/details/87896647

版权

简易风车模型

开发工具与关键技术：DW-border属性+关键帧
作者：徐晶旗
撰写时间：2019年2月6日

觉得风车转起来挺好看的,然后就想着其实自己可以尝试做一个,最后就做了一个很简单的出来,风车首先要想到要有叶子,中心轴和柱子,柱子和叶子应该和中心轴连在一起,然后只要给中心轴设置一个关键帧的样式让它可以旋转,叶子就可以随中心轴一起旋转了。

我在这里设置的类“winnower”表示一个大盒子，把整个内容包裹起来，“post”表示柱子，“center”表示中心轴，“leaf”表示叶子，我给了三个leaf的类,表示有三片叶子,“foundation”表示柱子下面的支撑点。然后给它们设置样式。

给柱子设置宽高，背景颜色以及定位，给中心轴设置一个动画函数和动画时长,再用关键帧@keyframes来控制和实现它的动画效果,这里需用到transform:rotate;实现它的旋转效果,0%时开始旋转,100%时结束旋转,再给叶子设置样式让它看上去有点像叶子,在这里我给它设置成了三角形的样子,给柱子下面的支撑点设置成了一个椭圆形的样子,大致就是这样了。

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易风车模型</title>
</head>
<style>
	.win{
		height:500px;
		width:500px;
	}
	.post{
		height:100px;
		width:5px;
		background:rgba(197,89,90,1.00);
		top:100px;
		left:100px;
		position: absolute;
	}
	.round{
		height:10px;
		width:10px;
		left:-3px;
		top:-1px;
		background:#ffe4ff;
		border-radius: 100%;
		position:absolute;
		animation: cute 10s linear infinite;
	}
	@keyframes cute{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	.leaf1{
		border-width:0 0 32px 68px;
		left:6px;
		border-style:none solid solid solid;
		border-color:transparent transparent transparent aquamarine;
		position:absolute;
	}
	.leaf2{
		border-width:0 0 68px 32px;
		left:4px;
		top:-61px;
		border-style:none solid solid solid;
		border-color:transparent transparent transparent lightgreen;
		position:absolute;
	}
	.leaf3{
		border-width:0 0 32px 68px;
		left:-55px;
		border-style:none solid solid solid;
		border-color:transparent transparent transparent lightpink;
		position:absolute;
	}
	.garden{
		width:10px;
		height:4px;
	    border-radius: 50%;
		top:97px;
		left:-3px;
		position: absolute;
		background: rgba(197,89,90,1.00);
	}
</style>
<body>
</body>
<div class="win">
	<div class="post">
		<div class="round">
			<div class="leaf1"></div>
			<div class="leaf2"></div>
			<div class="leaf3"></div>
		</div>
		<div class="garden">
			</div>
	</div>
</div>
</html>

这是没加上关键帧的运行图片
在这里插入图片描述

这是加上关键帧之后转动时的运行图
在这里插入图片描述

青柠檬檬哒

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
让风车转动起来

简易风车模型开发工具与关键技术：DW-border属性+关键帧作者：徐晶旗撰写时间：2019年2月6日利用border属性来给风车加上几片叶子和柱子,再用关键帧+“animation”的功能实现动画效果,使风车转动起来.&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;ti...
复制链接

扫一扫