其他-基于vue-cli CSS3 Sass实现数字滚动效果

效果一（实现数字从0开始滚动）：

准备条件：
vue-cli框架（如果没用此框架将功能稍微改写适应你的框架就好）、css3(keyframes,animation)
html代码：

<template>
<div ref="number" class="wrap-container"></div>
</template>
<script>
export default {
  name: 'num',
  data () {
    return {
      value: 1234567890,
      html: ''
    }
  },
  methods: {
    init () {
      this.value.toString().split('').forEach(v => {
        this.html += '<div class="wrap"><ul class="list scroll' + v + '">'
        for (let i = 0; i <= 9; i++) {
          this.html += '<li>' + i + '</li>'
        }
        this.html += '</ul></div>'
      })
      this.$refs.number.innerHTML = this.html
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style>
.wrap-container { display:flex;justify-content: flex-start;}
.wrap{ width:12px;height:18px; position:relative; overflow:hidden;box-sizing: border-box;font-size: 18px;}
.list { position:absolute;left:0;top:0;margin:0;padding:0; height:100%;box-sizing: border-box;}
.list li{ list-style:none;width:12px;height:18px;line-height:18px;color:#fff; text-align:center; float:left;box-sizing: border-box;}
@keyframes move9{0%{top:0;}100%{top:-900%;}}
@keyframes move8{0%{top:0;}100%{top:-800%;}}
@keyframes move7{0%{top:0;}100%{top:-700%;}}
@keyframes move6{0%{top:0;}100%{top:-600%;}}
@keyframes move5{0%{top:0;}100%{top:-500%;}}
@keyframes move4{0%{top:0;}100%{top:-400%;}}
@keyframes move3{0%{top:0;}100%{top:-300%;}}
@keyframes move2{0%{top:0;}100%{top:-200%;}}
@keyframes move1{0%{top:0;}100%{top:-100%;}}
.scroll9 {animation:2s move9 /*infinite*/ linear;top:-900%; }
.scroll8 {animation:2s move8 /*infinite*/ linear;top:-800%; }
.scroll7 {animation:2s move7 /*infinite*/ linear;top:-700%; }
.scroll6 {animation:2s move6 /*infinite*/ linear;top:-600%; }
.scroll5 {animation:2s move5 /*infinite*/ linear;top:-500%; }
.scroll4 {animation:2s move4 /*infinite*/ linear;top:-400%; }
.scroll3 {animation:2s move3 /*infinite*/ linear;top:-300%; }
.scroll2 {animation:2s move2 /*infinite*/ linear;top:-200%; }
.scroll1 {animation:2s move1 /*infinite*/ linear;top:-100%; }
</style>

效果：

转载至微笑空间站 http://fullsmilespace.com/?p=128