css 加载 特效 |限定字数然后省略号表示css

1. 加载条特效

.loading-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #eee;
}
.loading-bar::before {
content: "";
display: block;
position: absolute;
height: 5px;
top: 0;
left: 0;
background-color: #f00;
animation: loading 2s ease-in-out infinite;
}
@keyframes loading {
0% {
width: 0%;
left: 0%;
}
50% {
width: 50%;
left: 25%;
}
100% {
width: 100%;
left: 0%;
}
}

2. 旋转动画特效

.loading-spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
}
.loading-spinner::before {
content: "";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
border: 3px solid #f00;
border-top-color: transparent;
animation: loading 1s ease infinite;
}
@keyframes loading {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

3. 淡入淡出特效

.loading-fade {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
opacity: 1;
transition: opacity .5s ease-in-out;
}
.loading-fade.loaded {
opacity: 0;
}

以上就是一些常见的CSS加载特效，希望能对大家有所帮助。