纯DOM+CSS3实现简单的小风车动画

2024-07-11 08:25:47

字体：大中小

来源：转载

供稿：网友

用CSS3实现了一个小风车的效果，转转转，挺简单。

效果

代码

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <title>小风车-转啊转</title>
<style type="text/css"> html {
font-size: 10px; }
html * {
-webkit-box-sizing: border-box; box-sizing: border-box;
}
.windmill { width: 25rem;
min-height: 30rem; height: auto;
margin: 3rem auto; display: -webkit-box;
display: -webkit-flex; display: -ms-flexbox;
display: flex; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-flex-direction: column;
-ms-flex-direction: column; flex-direction: column;
-webkit-box-pack: start; -webkit-justify-content: flex-start;
-ms-flex-pack: start; justify-content: flex-start;
-webkit-box-align: center; -webkit-align-items: center;
-ms-flex-align: center; align-items: center;
} /* 头部 */
.windmill-head {
height: 20rem; width: 20rem;
display: -webkit-box; display: -webkit-flex;
display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-webkit-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-justify-content: space-around; -ms-flex-pack: distribute;
justify-content: space-around; -webkit-align-content: space-around;
-ms-flex-line-pack: distribute; align-content: space-around;
-webkit-transform: translateZ(0); transform: translateZ(0);
-webkit-animation: rotate-windmill 1s linear infinite; animation: rotate-windmill 1s linear infinite;
border-radius: 50%; border: 0.1rem solid #DBE526;
-webkit-transition: border-radius 2s linear; transition: border-radius 2s linear;
} /* 两片叶子的包裹层 */
.wrapper {
display: -webkit-box; display: -webkit-flex;
display: -ms-flexbox; display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal;
-webkit-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: justify; -webkit-justify-content: space-between;
-ms-flex-pack: justify; justify-content: space-between;
height: 135%; width: 50%;
-webkit-box-align: center; -webkit-align-items: center;
-ms-flex-align: center; align-items: center;
} /* 包裹层对称 */
.wrapper1 {
-webkit-transform: rotate(-45deg) translate(5rem); transform: rotate(-45deg) translate(5rem);
-webkit-transform-origin: right center; transform-origin: right center;
}
.wrapper2 { -webkit-transform: rotate(45deg) translate(-5rem);
transform: rotate(45deg) translate(-5rem); -webkit-transform-origin: left center;
transform-origin: left center; }
/* 扇叶的形状及底色 */
.leaf { height: 13rem;
width: 5rem; border-radius: 5rem/ 5rem 5rem 20rem 20rem;
-webkit-box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65); box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);
}
.leaf1 { border: 0.05rem solid #D1A23A;
-webkit-transform: rotate(0deg) translate(0); transform: rotate(0deg) translate(0);
background-color: rgba(230, 0, 100, 5); background: -webkit-gradient(linear, left top, left bottom, from(#D02CE4), to(#f5f5f5));
background: -webkit-linear-gradient(top, #D02CE4, #f5f5f5); background: linear-gradient(180deg, #D02CE4, #f5f5f5);
-webkit-transition: background 2s linear; transition: background 2s linear;
}
.leaf2 { border: 0.05rem solid #49D13A;
background-color: rgba(230, 0, 150, 5); -webkit-transform: rotate(-180deg) translate(0);
transform: rotate(-180deg) translate(0); background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));
background: -webkit-linear-gradient(top, #B91717, #f5f5f5); background: linear-gradient(180deg, #B91717, #f5f5f5);
-webkit-transition: background 2s linear 2s; transition: background 2s linear 2s;
}
.leaf3 { border: 0.05rem solid #C6079D;
background-color: rgba(130, 0, 100, 5); -webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0); background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));
background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5); background: linear-gradient(180deg, #1CBA9F, #f5f5f5);
-webkit-transition: background 2s linear; transition: background 2s linear;
-webkit-transition: background 2s linear 4s; transition: background 2s linear 4s;
}
.leaf4 { border: 0.05rem solid #3A5FD1;
background-color: rgba(230, 100, 100, 5); -webkit-transform: rotate(-180deg) translate(0);
transform: rotate(-180deg) translate(0); background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));
background: -webkit-linear-gradient(top, #335642, #f5f5f5); background: linear-gradient(180deg, #335642, #f5f5f5);
-webkit-transition: background 2s linear 6s; transition: background 2s linear 6s;
} /* 尾部 */
.windmill-pillar {
-webkit-transform: translateZ(0); transform: translateZ(0);
width: 3rem; height: 20rem;
background: #FFF; -webkit-transform: translateY(-52%);
transform: translateY(-52%); position: relative;
z-index: -2; border-radius: 50% 50% 0 0;
-webkit-animation: cd 2s linear infinite; animation: cd 2s linear infinite;
}
@-webkit-keyframes rotate-windmill { 0% {
-webkit-transform: rotate(0); transform: rotate(0);
} 100% {
-webkit-transform: rotate(360deg); transform: rotate(360deg);
} }
@keyframes rotate-windmill {
0% { -webkit-transform: rotate(0);
transform: rotate(0); }
100% { -webkit-transform: rotate(360deg);
transform: rotate(360deg); }
}
@-webkit-keyframes cd { 0% {
background: #F5F5F5; }
50% { background: #E1CB82;
} 75% {
background: #F1F358; }
100% { background: #FFFC00;
} }
@keyframes cd {
0% { background: #F5F5F5;
} 50% {
background: #E1CB82; }
75% { background: #F1F358;
} 100% {
background: #FFFC00; }
} </style>
</head>
<body> <div class="windmill">
<div class="windmill-head"> <div class="wrapper wrapper1">
<div class="leaf leaf1"></div> <div class="leaf leaf2"></div>
</div> <div class="wrapper wrapper2">
<div class="leaf leaf3"></div> <div class="leaf leaf4"></div>
</div> </div>
<div class="windmill-pillar"></div> </div>
</body>
</html>