1. 遍历

实现了金币下落的动画，图片需要替换一下啊
@for $i from 1 through 9 { .xb-#{$ i}{
position: fixed;
background: url('../img/xb-#{ $i}.png') no-repeat center / contain; opacity: 0; z-index: 88; -webkit-animation: SlideUpIn 1s ease 0.1s+$ i*0.1 1;
-webkit-animation-fill-mode: forwards; // 样式定格在动画的最后状态
@if $i == 1{ width: 62px; height: 61px; top: 64px; left: 3px; } @else if$ i == 2{
width: 44px;
height: 40px;
top: 68px;
right: 8px;
} @else if $i == 3{ width: 31px; height: 25px; top: 180px; bottom: 6px; } @else if$ i == 4 {
width: 33px;
height: 30px;
top: 195px;
left: 147px;
} @else if $i == 5 { width: 18px; height: 19px; top: 184px; right: 90px; } @else if$ i == 6 {
width: 24px;
height: 25px;
top: 251px;
right: 126px;
} @else if $i == 7 { width: 21px; height: 20px; left: 52px; bottom: 181px; } @else if$ i == 8 {
width: 30px;
height: 30px;
right: 20px;
bottom: 188px;
} @else if $i == 9 {
width: 46px;
height: 45px;
left: 18px;
bottom: 122px;
}
}
}
@-webkit-keyframes SlideUpIn{
0% { -webkit-transform:translateY(-150px); opacity:0;}
50% { -webkit-transform:translateY(100px); opacity:.5;}
85% { -webkit-transform:translateY(5px); opacity:.9;}
100%{ -webkit-transform:translateY(0px); opacity:1;}
}