你会用css写一个加载动画吗？ 刺骨的言语ヽ痛彻心扉 2021-08-28 18:09 281阅读 0赞 <!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> .turn{ position: relative; width:100px; height: 100px; border: 10px solid #f4f4f4; animation:turn 1s linear infinite; margin: 100px auto; border-radius: 50%; } .turn::after{ position: absolute; content: ''; top:0px; left:10px; width: 12px; height: 12px; background: #333; border-radius:50%; } .turn::before{ position: absolute; content: ''; top:-4px; left:16px; width: 12px; height: 12px; background: blue; border-radius:50%; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{ transform:rotate(0deg);} 25%{ transform:rotate(90deg);} 50%{ transform:rotate(180deg);} 75%{ transform:rotate(270deg);} 100%{ transform:rotate(360deg);} } </style> </head> <body> <div class="turn"> </div> </body> </html>
还没有评论，来说两句吧...