重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
当访问者点击您网站上的链接或按钮时,他们希望看到某种反馈。但是,如果什么都没有发生,大多数人会得出结论,有些事情是错误的。他们会在意识到您的网站正在处理他们的请求之前迅速离开。
加载动画可以通过让人们知道他们的请求已被接收并正在处理来帮助防止这些类型的反弹并提供更好的用户体验 (UX)。
虽然一些网站建设者或主题会提供内置动画功能,但您可以使用 CSS 创建自己的。在这篇文章中,我们将解释如何使用一些基本的网页设计知识来做到这一点,并提供一些示例,您的团队可以将其用作灵感。
<div class="loader"></div>
.loader {
margin: auto;
border: 20px solid #EAF0F6;
border-radius: 50%;
border-top: 20px solid #FF7A59;
width: 200px;
height: 200px;
animation: spinner 4s linear infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}