今天我们来学习一下如何用CSS实现一个loading效果,让我们的页面更加生动有趣。
.loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading:before { content: ""; display: block; width: 50px; height: 50px; border-radius: 50%; border: 5px solid #ccc; border-top-color: #668cff; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
首先我们需要创建一个div,用来包裹我们的loading效果,设置宽高100%占据整个页面。接着我们使用flex布局使其内容垂直水平居中。然后通过:before伪元素创建一个圆形元素,宽高为50px,设置圆角50%使其变为圆形,边框为5px粗的灰色边框,并设置顶部边框颜色为蓝色,来模拟一个网球的形状。添加一个无限循环的动画使其旋转,使用transform:rotate来实现。
现在,我们只需要将此样式应用到需要显示loading效果的元素上即可。
<div class="loading"></div>
这样,我们就成功地用CSS实现了一个简单的loading效果。当然,我们可以根据需要修改样式和动画,让它更加个性化或者更符合我们的网站主题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。