<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css 扇叶</title>
<style lang="less">
.turn{
width:100px;
height: 100px;
background: aqua;
transform-origin: left bottom;
position: fixed;
left: 45vw;
top: 40vh;
border-radius: 100px 0 100px 0;
}
.turn1 {
transform: rotate(0deg);
animation:turn1 5s linear infinite;
}
.turn2 {
transform: rotate(120deg);
animation:turn2 5s linear infinite;
}
.turn3 {
transform: rotate(240deg);
animation:turn3 5s linear infinite;
}
@keyframes turn1{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes turn2{
0%{-webkit-transform:rotate(120deg);}
50%{-webkit-transform:rotate(300deg);}
100%{-webkit-transform:rotate(480deg);}
}
@keyframes turn3{
0%{-webkit-transform:rotate(240deg);}
50%{-webkit-transform:rotate(420deg);}
100%{-webkit-transform:rotate(600deg);}
}
</style>
</head>
<body>
<div class="turn turn1"></div>
<div class="turn turn2"></div>
<div class="turn turn3"></div>
</body>
</html>
