<!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>
你会用css写一个加载动画吗？
2022-04-29
116
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
你会用css写一个加载动画吗？
相关文章
|
2月前
|
前端开发
|
11天前
|
JavaScript
前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果，包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
25
0
0
|
2月前
|
前端开发
UED
开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣，可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数，或者光标颜色等，来适应特定的设计需求。使用这种动态元素，增强网站的互动性和用户体验，同时也为网站增添了一抹活泼的风格。
41
5
5
|
2月前
|
前端开发
JavaScript
|
2月前
|
前端开发
|
2月前
|
前端开发
JavaScript
|
2月前
|
前端开发
|
2月前
|
前端开发
|
2月前
|
容器
|
2月前
|
前端开发