前几天@歪闹说想换个类似 http://www.dengzhr.com 这个风格的博客，然后进去瞄了几眼看到一篇关于数字线性变化的动画文章，美女是用js写的自己封装的插件(羡慕js棒棒的美女),然后感觉css也可以写，不过没有她的那么方便吧
来看效果，当然还是少不了几行js
我们来看看具体的实现方式吧
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| // 其中span是从0-9所需要的动画数字 data-num是所显示的数据
// 有多少位数字就有多少个num-bg元素，就是html有点略多
<div class="digital-box">
<div class="num-bg">
<div class="num" data-num="5">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="dot">,</div>
<div class="num-bg">
<div class="num" data-num="6">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="num-bg">
<div class="num" data-num="7">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="num-bg">
<div class="num" data-num="8">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="dot">,</div>
<div class="num-bg">
<div class="num" data-num="9">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="num-bg">
<div class="num" data-num="6">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="num-bg">
<div class="num ceshi" data-num="9">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div class="dot dot2">万</div>
</div>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| body{ background-color: #00314f;}
.digital-box {
display: inline-block;
height: 140px;
margin:100px;
font-size: 52px;
text-align: center;
color:#fff;
}
.digital-box .num-bg {
float: left;
width: 40px;
height: 70px;
margin: 20px 5px 50px;
background: rgba(56,106,171,.3);
border-radius: 3px;
border: 1px solid #386aab;
box-shadow: 0 0 3px 2px #2c5570;
overflow: hidden;
}
.digital-box .num {
position: relative;
top: 0;
width: 40px;
line-height: 70px;
-webkit-transition: top ease-out .5s;
transition: top ease-out .5s;
}
.digital-box .num span {
float: left;
width: 100%;
}
.digital-box .dot {
float: left;
width: 25px;
margin-top: 25px;
}
.digital-box .dot3 {
font-size: 78px;
margin-top: 3px
}
.digital-box .dot2 {
font-size: 25px;
margin-top: 60px;
margin-left: 5px
}
|
js
1
2
3
4
5
6
7
8
9
| $(function(){
$(".num").each(function(){
var _val = $(this).data('num');
$(this).css({
"top":-(_val*70)+'px',
"transitionDuration" :_val*.3+'s'
})
})
})
|
附上demo地址：http://output.jsbin.com/henawarege