简单版
@for $i from 1 through 6 { &:nth-of-type(#{$i}) img { transition-delay: calc(0.1 *#{$i}s);//逐次延时效果 } }
进阶版
@for $i from 1 through length($数组) { $color: nth($数组, $i); &:nth-of-type(#{$i}) { color: $color;//通常用于序列颜色显示效果 &:hover { color: white; } } }
混合版
$bg-color: "blue", "lightBlue", "green", "orange", "yellow", "purple", "pink", "red", "lightRed"; $bgColors: $blue, $lightBlue, $green, $orange, $yellow, $purple, $pink, $red, $lightRed; @for $i from 1 through length($bg-color) { //通过颜色属性定位不同节点,制定进行颜色样式设置 &[bg-color="#{nth($bg-color, $i)}"] { color: white; background-color: nth($bgColors, $i); background-image: url("static/img/v-html/bg/#{nth($bg-color, $i)}.jpg"); } }
复杂序列逐帧动画
<style lang='scss' scoped> .sg-body { animation: sg-animate 2s infinite alternate; //在两秒内完成序列png动画图片来回播放,并循环无限次 $bgPreUrl: "http://www.shuzhiqiang.com/img/bg_"; //序列图路径前缀 @keyframes sg-animate { $len: 75; //逐帧动画画面自由75张图 @for $i from 0 through $len { #{ $i * 1% } { background-image: url(#{$bgPreUrl}#{$i}.png); } } // 序列图播放完毕那一刻到100%时间(第2s结束那一刻)之间都停留在最后一张序列图静止不动 #{ $len * 1% }, 100% { background-image: url(#{$bgPreUrl}#{$len}.png); } } } </style>
编译后的CSS代码如图
……