css动画,三片扇叶旋转
<!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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步