html界面等待状态,CSS实现的loading页面等待效果.html

Document

.loader{

position: relative;

width: 8px;

height: 35px;

background: red;

margin: 0 auto;

animation: loading 0.3s linear 0s infinite alternate;

}

.loader:after , .loader:before{

position: absolute;

content: '';

width: 8px;

height: 35px;

background: red;

}

.loader:after{

transform: scale(1,0.5);

margin-left: -10px;

animation: loading 0.5s linear 0.5s infinite alternate-reverse;

}

.loader:before{

transform: scale(1,0.3);

margin-left: 10px;

animation: loading 0.5s linear 0.5s infinite alternate-reverse;

}

@keyframes loading{

from{

opacity: 0.5;

transform: scale(1,0.5);

}

to{

opacity: 1;

transform: scale(1,1);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史