html如何添加加载动画效果,CSS3创建加载动画效果

加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等，而加载动画能够在内容加载完成前给用户视觉反馈，从而能够吸引用户而不让他们直接放弃继续浏览你的网站。

创建加载效果所需的CSS3知识

在我们开始创建加载动画之前，我们得先了解一些CSS3的属性来帮助我们创建这些效果。

伪元素 :before :after

伪元素对于制作CSS3加载动画是非常有用的。伪元素可以在HTML元素前面或者后面创建一个假的元素，相当于创建一个实际上并不存在的额外的元素。

伪元素的英文单词是Pseudo Elements，Pseudo来源于希腊单词，意思是假的

虽然如此，我们还是可以利用CSS3来给伪元素定义样式。当然，我们并不是一定要用伪元素，但是他们确实很有用，我们能够利用他们使我们的加载动画更加精美。你完全可以按照你定义html元素样式的方式来定义伪元素的样式。

唯一的区别是你首先要给伪元素指定一个内容,如果没有指定的话，就没有内容可以给浏览器渲染。你可以指定任何内容给伪元素，比如说“loading....”,如果没有想要指定的内容，可以将contents设为“”。

CSS3 Animation

除了伪元素之外，CSS3动画也是很重要的，如果没有它的话也就没有加载动画一说而只是静态视觉效果了，这对于说明内容正在加载也没有什么意义。

CSS3动画的要点是@keyframes，CSS可以指定动画从什么时候开始。你可以将@keyframes想象成一个随着时间变化的舞台，在@keyframes里面你可以通过指定样式指定每个时间点上演的内容。——CSS3 Animation入门

特别声明：在下面的代码中，我们没有添加浏览器前缀。如果你需要添加特定的前缀，请参阅CodePen中的示例。

音浪效果

这个创意来源于创造一个类似于音频波浪的效果。

HTML

HTML代码中创建了5个元素，代表5个音频条。

CSS

这个波动的效果是通过改变的高度从5px到30px来实现的，同时为了让音浪能够上下对称地波动，也要将的y坐标向下移动15px.

#preloader_1{

position:relative;

}

#preloader_1 span{

display:block;

bottom:0px;

width: 9px;

height: 5px;

background:#9b59b6;

position:absolute;

animation: preloader_1 1.5s infinite ease-in-out;

}

#preloader_1 span:nth-child(2){

left:11px;

animation-delay: .2s;

}

#preloader_1 span:nth-child(3){

left:22px;

animation-delay: .4s;

}

#preloader_1 span:nth-child(4){

left:33px;

animation-delay: .6s;

}

#preloader_1 span:nth-child(5){

left:44px;

animation-delay: .8s;

}

@keyframes preloader_1 {

0% {height:5px;transform:translateY(0px);background:#9b59b6;}

25% {height:30px;transform:translateY(15px);background:#3498db;}

50% {height:5px;transform:translateY(0px);background:#9b59b6;}

100% {height:5px;transform:translateY(0px);background:#9b59b6;}

}

默认情况下每个的动画是同时发生的，所以要呈现出波浪的效果，就可以使用animation-delay来控制每个动画开始的时间，依次将每个动画延迟0.2秒，就可以出现漂亮的波浪效果啦。在这里我们使用了nth-child()来选择对应的元素