html数字滚动特效
时间: 2023-08-17 20:15:25 浏览: 34
HTML数字滚动特效可以使用JavaScript实现。以下是一个简单的示例代码:
HTML部分:
```html
<div class="counter">
<span class="count">0</span>
</div>
```
CSS部分:
```css
.counter {
font-size: 48px;
font-weight: bold;
text-align: center;
}
.count {
display: inline-block;
position: relative;
}
.count span {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.count.move span {
opacity: 1;
animation: count 2s linear;
}
@keyframes count {
from {
top: 0;
opacity: 1;
}
to {
top: -100%;
opacity: 0;
}
}
```
JavaScript部分:
```javascript
function counter(elm, start, end, duration) {
let range = end - start;
let current = start;
let increment = end > start ? 1 : -1;
let stepTime = Math.abs(Math.floor(duration / range));
let timer = setInterval(function() {
current += increment;
elm.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
let counterElm = document.querySelector('.count');
let counterStart = 0;
let counterEnd = 1000;
let counterDuration = 2000;
setTimeout(function() {
counterElm.classList.add('move');
counter(counterElm, counterStart, counterEnd, counterDuration);
}, 1000);
```
上述代码实现了一个数字从0到1000滚动的特效。可以根据需要修改起始数字、结束数字和动画持续时间等参数。