淘先锋技术网

首页 1 2 3 4 5 6 7

CSS(层叠样式表)是网页设计中的必要技术之一,能够为HTML网页增加样式和布局,使其更加美观和易于阅读。而CSS加载特效代码则是在加载网页时,为页面添加动画效果,让用户体验更加出色。下面我们来看一些CSS加载特效代码。

.loading {
height: 50px;
width: 50px;
border: 5px solid rgba(0, 0, 0, 0.2);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

这段代码能够创建一个圆形的加载图标,其外观会在1秒内旋转一周,一直重复该动画。使用时只需将相应的HTML元素赋予类名 “.loading” 即可。

.loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loader div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.loader div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.loader div:nth-child(4) {
left: 56px;
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(24px, 0);
}
}

这段代码能够创建一个由四个圆点组成的加载动画。使用时将该代码块嵌入到HTML中,并为相应的HTML元素赋予类名 “.loader” 即可。

这些CSS加载特效代码能够使页面更加精彩,提升用户体验,是Web设计常用的范例之一。使用时应当根据需要进行定制化处理,以达到最佳的效果。