css实现loading,css3 实现loading效果

1 圆点渐入渐出

要点： 缩放和透明度的变化,循环变化

.demo1{

width: 40px;

height: 40px;

margin: 0 auto;

border-radius: 100px;

background-color: red;

opacity:;

animation: fadeIn 1s infinite ease-in-out;

}

@-webkit-keyframes fadeIn{

from{

transform: scale(0);

}

to{

transform: scale(1);

opacity:;

}

}

@keyframes fadeIn{

from{

transform: scale(0);

}

to{

transform: scale(1);

opacity:;

}

}

2 线条loading图

要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化(负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s，表示从动画的1s之后开始执行，前一秒的动画直接跳过，不执行)

html

css

.demo2 div{

width: