淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3加载版是一种应用CSS3技术实现的网页加载效果。它能够为用户带来非常炫酷的视觉效果,同时也提高了网页的用户体验,让访问者感到更有趣、更流畅,特别是在低网速情况下加载速度更快。

/* CSS代码 */
.loader {
margin: auto;
width: 40px;
height: 40px;
position: relative;
}
.loader div {
position: absolute;
top: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader div:nth-child(1) {
left: 0;
animation: lds-ellipsis1 0.6s infinite;
}
.loader div:nth-child(2) {
left: 0;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(3) {
left: 16px;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(4) {
left: 32px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(16px, 0);
}
}

以上是CSS3加载版的代码,通过复制代码并粘贴到你的CSS文件中便可以使用。仔细分析可以发现,该代码在使用了animation属性及关键帧动画技术的前提下,基于四个圆圈内外动画的闭环设计让整个加载效果从视觉上更显得流畅,同时,我们可以根据自己的需求更改颜色和大小以及动画的时间等。

最后,值得一提的是,CSS3加载版仅是CSS3技术的冰山一角,CSS3还拥有更多的强大属性以及各种有趣的应用效果,在CSS3时代不断地发掘更多的技巧,将会使我们的工作变得愉悦而高效。