数字滑动特效_animation: imgfloatmobile 1s 0.5s cubic-bezier(0.4-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字滑动特效</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
margin: 0;
overflow: hidden;
}

.counter-container {
text-align: center;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
margin-bottom: 30px;
}

.counter {
display: flex;
justify-content: center;
font-size: 5rem;
font-weight: bold;
color: #4a6bff;
height: 100px;
position: relative;
overflow: hidden;
}

.digit-container {
position: relative;
width: 60px;
height: 100px;
margin: 0 5px;
perspective: 1000px;
}

.digit {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.digit.flip {
transform: rotateX(180deg);
}

.digit.front {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.digit.back {
background: linear-gradient(135deg, #c3cfe2 0%, #f5f7fa 100%);
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
transform: rotateX(180deg);
}

.btn {
margin-top: 30px;
padding: 12px 30px;
font-size: 1rem;
background: #4a6bff;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(74, 107, 255, 0.3);
}

.btn:hover {
background: #3a5bef;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74, 107, 255, 0.4);
}

.btn:active {
transform: translateY(0);
}

.footer {
position: absolute;
bottom: 20px;
color: #888;
font-size: 0.8rem;
}

/* 数字动画 */
@keyframes slideUp {
0% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(-100%); opacity: 0; }
51% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

.slide-up {
animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
</style>
</head>
<body>
<div class="counter-container">
<h1>数字滑动特效演示</h1>
<div class="counter" id="counter">
<div class="digit-container">
<div class="digit front">0</div>
<div class="digit back">1</div>
</div>
<div class="digit-container">
<div class="digit front">0</div>
<div class="digit back">1</div>
</div>
<div class="digit-container">
<div class="digit front">0</div>
<div class="digit back">1</div>
</div>
</div>
<button class="btn" id="incrementBtn">增加数字</button>
</div>

<div class="footer">

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const counter = document.getElementById('counter');
const incrementBtn = document.getElementById('incrementBtn');
let currentNumber = 0;

// 初始化计数器显示
updateCounterDisplay();

// 增加数字按钮点击事件
incrementBtn.addEventListener('click', function() {
currentNumber = (currentNumber + 1) % 1000; // 限制在0-999之间
updateCounterDisplay();
});

// 更新计数器显示
function updateCounterDisplay() {
const digits = counter.querySelectorAll('.digit-container');
const numStr = currentNumber.toString().padStart(3, '0');

digits.forEach((container, index) => {
const front = container.querySelector('.front');
const back = container.querySelector('.back');

// 设置新的数字
const currentDigit = parseInt(front.textContent);
const newDigit = parseInt(numStr[index]);

if (currentDigit !== newDigit) {
// 设置背面数字
back.textContent = newDigit;

// 添加动画类
front.classList.add('flip');
back.classList.add('flip');

// 动画结束后重置
setTimeout(() => {
front.textContent = newDigit;
front.classList.remove('flip');
back.classList.remove('flip');
}, 600);
}
});
}

// 自动增加数字（可选）
setInterval(function() {
currentNumber = (currentNumber + 1) % 1000;
updateCounterDisplay();
}, 2000);
});
</script>
</body>
</html>