css3+html实现傍晚日落下的风车转动动画
最终效果如上图，主要是利用html绘制插画的结构体，然后css3的transform和背景渐变linear-gradient去实现动画的平滑过渡
Markup
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css3+html实现傍晚日落下的风车转动动画</title></head><body><div class="canvas"> <div class="stars"> <div class="star star-1 opacity-quarter"></div> <div class="star star-2 opacity-quarter"></div> <div class="star star-3 opacity-half"></div> <div class="star star-4 opacity-half"></div> <div class="star star-5 opacity-half"></div> <div class="star star-6 opacity-half"></div> <div class="star star-7"></div> <div class="star star-8 opacity-quarter"></div> <div class="star star-9 opacity-quarter"></div> <div class="star star-10"></div> <div class="star star-11"></div> <div class="star star-12 opacity-half"></div> <div class="star star-13 opacity-quarter"></div> <div class="star star-14 opacity-quarter"></div> <div class="star star-15"></div> <div class="star star-16 opacity-half"></div> <div class="star star-17"></div> <div class="star star-18 opacity-half"></div> <div class="star star-19"></div> <div class="star star-20"></div> <div class="star star-21"></div> <div class="star star-22 opacity-half"></div> <div class="star star-23 opacity-quarter"></div> <div class="star star-24 opacity-quarter"></div> <div class="star star-25 opacity-half"></div> <div class="star star-26"></div> <div class="star star-27 opacity-half"></div> <div class="star star-28 opacity-quarter"></div> <div class="star star-29"></div> <div class="star star-30 opacity-half"></div> </div> <div class="shooting-star"></div> <div class="sun"></div> <div class="forest"> <div class="tree tree1"></div> <div class="tree tree2"></div> <div class="tree tree3"></div> <div class="tree tree4"></div> <div class="tree tree5"></div> <div class="tree tree6"></div> <div class="tree tree7"></div> <div class="tree tree8"></div> <div class="tree tree9"></div> <div class="tree tree10"></div> <div class="tree tree11"></div> <div class="tree tree12"></div> <div class="tree tree13"></div> <div class="tree tree14"></div> </div> <div class="house"> <div class="windmill"> <div class="mill-fan"> <div class="fan-wing fan-1"> <div class="fan-comb"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="fan-wing fan-2"> <div class="fan-comb"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="fan-wing fan-3"> <div class="fan-comb"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="fan-wing fan-4"> <div class="fan-comb"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div> <div class="roof"></div> <div class="floors"> <div class="light"></div> <div class="door"></div> </div> </div> </div></body></html>
样式部分代码如下：
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;}body {
background: #292f4c;}.canvas {
height: 340px;
width: 340px;
border: 10px solid #3b436d;
border-radius: 50%;
margin: 10% auto;
position: relative;
background: linear-gradient(to bottom, #4d4d83 0%, #c76961 246px, #292f4c 0%);
overflow: hidden;}.sun {
position: absolute;
height: 112px;
width: 112px;
background: linear-gradient(to bottom, #ffc673 0%, #ff653c 100%);
left: 36px;
top: 70px;
border-radius: 50%;}.forest {
bottom: -8px;
position: absolute;}.tree {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 48px solid #292f4c;
position: absolute;
bottom: 80px;}.tree.tree1 {
left: 22px;
bottom: 70px;}.tree.tree2 {
left: 42px;}.tree.tree3 {
bottom: 62px;
left: 60px;}.tree.tree4 {
left: 74px;
bottom: 64px;}.tree.tree5 {
left: 90px;
bottom: 72px;}.tree.tree6 {
left: 120px;}.tree.tree7 {
left: 140px;}.tree.tree8 {
left: 160px;}.tree.tree9 {
left: 190px;}.tree.tree10 {
left: 205px;
bottom: 60px;}.tree.tree11 {
left: 220px;
bottom: 70px;}.tree.tree12 {
bottom: 80px;
left: 240px;}.tree.tree13 {
left: 260px;
bottom: 70px;}.tree.tree14 {
left: 280px;
bottom: 60px;}.floors {
height: 100px;
width: 74px;
background: #292f4c;
left: 10%;
position: absolute;
bottom: 80px;}.floors:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 0px solid transparent;
border-bottom: 100px solid #292f4c;
left: -11px;}.floors:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 11px solid transparent;
border-bottom: 100px solid #292f4c;
right: -11px;
bottom: 0;}.roof {
border-left: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 48px solid #292f4c;
position: absolute;
width: 0;
height: 0;
bottom: 180px;
left: -10px;}.house {
position: absolute;
bottom: -10px;
left: 122px;}.door {
height: 32px;
width: 24px;
background: linear-gradient(to bottom, #ffed60 0%, #ffb73c 100%);
border-radius: 12px 12px 0 0;
position: absolute;
bottom: 0;
left: 25px;
box-shadow: 0 0px 15px #ffed60;}.light {
height: 12px;
width: 12px;
background: linear-gradient(to bottom, #ffed60 0%, #ffb73c 100%);
border-radius: 50%;
position: absolute;
top: 10px;
left: 30px;}.light:before {
content: "";
height: 36px;
width: 12px;
background: linear-gradient(to bottom, #ffed6000 0%, #ffb73c 50%, #ffed6000 100%);
position: absolute;
top: -12px;
opacity: 0.3;}.light:after {
content: "";
height: 36px;
width: 12px;
background: linear-gradient(to bottom, #ffed6000 0%, #ffb73c 50%, #ffed6000 100%);
position: absolute;
top: -12px;
opacity: 0.3;
transform: rotate(90deg);}.fan-wing {
width: 100px;
height: 24px;
border-bottom: 8px solid #292f4c;
position: relative;
left: 0;
left: 0;}.fan-wing .fan-comb {
width: 64px;
height: inherit;
border: 4px solid #292f4c;}.fan-wing .fan-comb ul li {
border-right: 4px solid #292f4c;
display: inline;
margin-left: 3.4px;}.fan-wing.fan-1 {
left: 0;}.fan-wing.fan-2 {
transform: rotate(90deg);
transform-origin: 112px 12px;}.fan-wing.fan-3 {
transform: rotate(180deg);
transform-origin: 100px 0px;}.fan-wing.fan-4 {
transform: rotate(270deg);
transform-origin: 64px -12px;}.windmill {
position: absolute;
top: -216px;
z-index: 8;
left: -65px;
animation: rotatemill 10s infinite linear;
transform-origin: 105px 25px;}@keyframes rotatemill {
100% {
transform: rotate(360deg);
}}.star {
background: white;
height: 2px;
width: 2px;
position: absolute;
left: 100px;
top: 20px;
border-radius: 25%;
opacity: 0.5;}.star.star-1 {
left: 150px;}.star.star-2 {
left: 170px;
top: 60px;}.star.star-3 {
left: 130px;
top: 80px;}.star.star-4 {
left: 90px;
top: 80px;}.star.star-5 {
left: 179px;
top: 90px;}.star.star-6 {
left: 136px;
top: 97px;}.star.star-7 {
left: 150px;
top: 97px;}.star.star-8 {
left: 200px;
top: 95px;}.star.star-9 {
left: 260px;
top: 95px;}.star.star-10 {
left: 37px;
top: 100px;}.star.star-11 {
left: 35px;
top: 80px;}.star.star-12 {
left: 25px;
top: 90px;}.star.star-13 {
left: 25px;
top: 135px;}.star.star-14 {
left: 25px;
top: 118px;}.star.star-15 {
left: 10px;
top: 123px;}.star.star-16 {
left: 135px;
top: 23px;}.star.star-17 {
left: 140px;
top: 10px;}.star.star-18 {
left: 200px;
top: 36px;}.star.star-19 {
left: 215px;
top: 37px;}.star.star-20 {
left: 219px;
top: 30px;}.star.star-21 {
left: 230px;
top: 80px;}.star.star-22 {
left: 230px;
top: 150px;}.star.star-23 {
left: 226px;
top: 158px;}.star.star-24 {
left: 250px;
top: 136px;}.star.star-25 {
left: 273px;
top: 123px;}.star.star-26 {
left: 298px;
top: 93px;}.star.star-27 {
left: 296px;
top: 136px;}.star.star-28 {
left: 279px;
top: 150px;}.star.star-29 {
left: 85px;
top: 29px;}.star.star-30 {
left: 83px;
top: 46px;}.opacity-half {
opacity: 0.5;}.opacity-quarter {
opacity: 0.25;}.shooting-star {
height: 3px;
width: 3px;
background: #ffffff3b;
top: 30px;
position: absolute;
right: 40px;
border-radius: 2px 0 0 2px;
transform: translate(0px, 0px) rotate(-45deg);}.shooting-star:before {
content: "";
height: 0;
width: 0;
border-top: 1px solid transparent;
border-bottom: 2px solid transparent;
border-left: 130px solid #ffffff3b;
left: 3px;
position: absolute;}@keyframes shootingstar {
0% {
transform: translate(0px, 0px) rotate(-45deg);
}
100% {
transform: translate(-300px, 300px) rotate(-45deg);
}}@keyframes startwinkle {
0% {
opacity: 0.25;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.25;
}}版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
![zblog获取多个分类的文章，并按[最新/热门/热评]进行排序](http://yanfangsheng.com/zb_users/theme/zblogsm_t2/include/random/2.jpg)
评论
捐卵联系方式
回复识别码：crzabw42953WP-例证丰富选材得当描述详略得当较具说服力。http://zltkiyr.cn/
捐卵联系方式
回复识别码：zscxgd49802LR-感情真挚情意浓浓似香醇美酒令人不饮而醉。http://bslfkj.cn/
捐卵联系方式
回复识别码：ailbkh23971LQ-主题不够严肃，思想之中尚有糟粕。http://klsnsj.cn/
法务时刻
回复识别码：uvtmnf54820DP-哇啊啊啊，不错啊https://www.jiwenlaw.com
11
回复识别码：xhfgjp28601PI-文章写的真不错http://02810000.com.cn
111
回复识别码：zrdtks39781HS-文章写的真不错http://sz-dongfangjiaju.com
1111
回复识别码：iflrxz42187KO-文章写的真不错http://www.ynsfms.com
法务时刻
回复识别码：hopnwk87410YG-写的实在太好了https://www.jiwenlaw.com
法务时刻
回复识别码：tqayhg74310NJ-哇啊啊啊，不错啊https://www.jiwenlaw.com