CSS3三种加载动画样式
CSS3 的加载动画真的是前端里的小魔法。页面还没加载完,先来个动画撑场面,不光提升体验,还显得有点专业范儿。今天分享三个我常用的加载样式,样式简单,效果还挺酷,适合各种项目场景,拿去直接用都行。
渐进式加载的动画比较适合那种图片多、内容重的页面。加载条慢慢推进,给用户一点“正在努力加载中”的安心感。用animation
和@keyframes
控制宽度从 0%到 100%,代码也不复杂:
.loading-bar {
width: 0%;
height: 5px;
background-color: #3498db;
animation: load 2s linear forwards;
}
@keyframes load {
to { width: 100%; }
}
旋转动画就更常见了,像是熟悉的小圈圈。原理是用transform
配合animation
让元素持续旋转。简单搞个圆形边框,加个 top 色,转起来还挺顺眼:
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
过渡效果适合做那种状态切换的动效,比如提示文字的淡入淡出。场景也挺多,比如用户登录后加载欢迎信息。只要配个transition
,再加个class
切换就行:
.loading-text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.loading-text.loaded {
opacity: 1;
}
这三种加载方式其实可以混合用,比如边加载边显示内容,再来个旋转动画配合状态提示,用户体验直接拉满。如果你项目也需要点视觉反馈,不妨试试这些效果,手感还不错哦。
下载地址
用户评论