简易风车模型
开发工具与关键技术：DW-border属性+关键帧
作者：徐晶旗
撰写时间：2019年2月6日
利用border属性来给风车加上几片叶子和柱子,再用关键帧+“animation”的功能实现动画效果,使风车转动起来.
<!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>
这是没加上关键帧的运行图片
这是加上关键帧之后转动时的运行图