css实现风车效果

【需求描述】使用CSS实现风车效果（摘自网友）。
在这里插入图片描述

DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>CSS实现风车效果title>
<style>
html{
    height: 100%;
}
body{
    height: 100%;
    background:#a5cad6;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
@keyframes rotate2{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

.windmill {
    display:block;
    position: relative;
    margin:50px auto;
    width: 100px;
    height: 120px;
 }
 
.windmill .pillar{  
    position:absolute;
    top:8px;
    left:44px;
    display: block;
    height: 0;
    width: 4px;
    border-width: 0 4px 80px 4px;
    border-style: none solid solid;
    border-color: transparent transparent white;
  }
.windmill .axis{
    position:absolute;
    top:0px;
    left:46px;
    width:4px;
    height:4px;
    border:3px #fff solid;
    background:#a5cad6;
    border-radius:5px;
    z-index: 88;
    animation: rotate 4s linear infinite;
} 
.windmill .swing{
    position:absolute;
    top:1px;
    left:-2px;
    display: block;
    height: 0;
    width: 2px;
    border-width: 50px 2px 0px 2px;
    border-style: solid solid none;
    border-color: white transparent transparent ;
    box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);
    transform-origin:0px 0px;
    transform:rotate(60deg);
 } 
.windmill .swing2{
    position:absolute;
    top:0px;
    left:4.5px;
    display: block;
    height: 0;
    width: 2px;
    border-width: 50px 2px 0px 2px;
    border-style: solid solid none;
    border-color: white transparent transparent ;
    transform-origin:0px 0px;
    transform:rotate(180deg);
 } 
.windmill .swing3{
    position:absolute;
    top:6px;
    left:3px;
    display: block;
    height: 0;
    width: 2px;
    border-width: 50px 2px 0px 2px;
    border-style: solid solid none;
    border-color: white transparent transparent ;
    transform-origin:0px 0px;
    transform:rotate(300deg);
 } 
.windmill .axis:hover {
    animation: rotate2 .3s linear infinite;
} 

  style>
 head>
<body>
    <span class="windmill">
        <span class="pillar">span>
        <span class="axis">
            <span class="swing">span>
            <span class="swing2">span>
            <span class="swing3">span>
        span>
    span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

相关阅读:
波卡XCM和Cosmos IBC是一样的原理吗？
java计算机毕业设计Web医学院校大学生就业信息管理系统MyBatis+系统+LW文档+源码+调试部署
【毕业设计】深度学习+opencv+python实现车道线检测 - 自动驾驶
替代for循环，让Python代码更pythonic
Docker Compose学习笔记
Netty RPC 实现
学习HashMap源码
【设计模式】Java设计模式 - 命令模式
vue.use()所做的事情
AI 实战篇｜基于 AI开放平台实现人脸识别对比功能，超详细教程【附带源码】

原文地址：https://blog.csdn.net/qzw752890913/article/details/126240826