京东商城动画
2018-05-21 本文已影响9人
饥人谷_momo
http://js.jirengu.com/zukaxonuze/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span>京</span>
<span>东</span>
<span>商</span>
<span>城</span>
</body>
</html>
span {
display: inline-block;
/* loading 动画名称
4s animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计
infinite 循环次数,无限
linear线性播放
*/
animation: loading 4s infinite linear;
}
span:nth-child(1){
animation-delay: 0s;
}
span:nth-child(2){
animation-delay: 1s;
}
span:nth-child(3){
animation-delay: 2s;
}
span:nth-child(4){
animation-delay: 3s;
}
/*
@keyframes 后面跟着一个名字
0 12.5% 25% 100% 时间
transform: scale(2) 放大倍数
*/
@keyframes loading {
0%{
transform: scale(1);
}
12.5% {
transform: scale(2);
}
12.5%, 25%{
transform: scale(2);
}
25%, 100% {
transform: scale(1);
}
}
image.png
