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

(编辑：jimmy 日期: 2024/12/24 浏览：3 次 )

用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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：CSS3实现简易版的刮刮乐效果
下一篇：灵活运用CSS3特性绘制简易版围棋效果