css3加载成功动画

CSS3是网页开发中重要的一部分，它可以提供丰富的样式功能，其中包括加载动画。在网页开发中，减少用户等待时间是一项重要任务。如果一个网页加载速度过慢，用户很可能会选择放弃，这对于网站流量会产生很大的影响。因此，如何让用户在等待页面加载的同时感到愉悦和舒适，就成为了一件非常重要的事情。下面将简单介绍一些CSS3的加载动画，希望对网页开发者有所帮助。

.spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
    -webkit-transform: scale(0);
    transform: scale(0);
}
100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
}
}

这个加载动画使用了border-radius和transform属性，可以创建一个圆形的元素，同时指定宽度和高度，让它在页面中居中。我们还可以在元素上应用动画，这里是用@keyframes关键字创建了sk-scaleout之后，将其应用于元素后，元素就会不断在缩小和放大。通过调整关键帧的数值，即可实现不同的效果。

.loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
}
.loader:before,.loader:after {
    content: "";
    position: absolute;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fff transparent;
    animation: loader 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.loader:before {
    left: -16px;
    border-radius: 0 0 16px 16px;
}
.loader:after {
    left: 16px;
    border-radius: 0 0 16px 16px;
    animation-delay: -0.4s;
}
@keyframes loader {
0% {
    transform: rotate(0deg);
}
33.333% {
    transform: rotate(180deg);
}
66.666% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
    

这个动画称为Spinner Loader，并使用:before和:after伪元素在一个中心点创建了两个三角形元素。通过CSS3的transform进行旋转，创建了一种旋转的效果。这个加载动画同时使用了animation属性将动画应用于元素。

所有的这些CSS3加载动画都可以通过细小的调整而独具特色，我们只需要像其他CSS样式一样应用这些动画到元素上，即可使我们的页面展现出更和谐的气息。希望这些简单的样例能够为广大开发者带来帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！