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