HTML代码：点击按钮弹出二维码并实现iOS支付动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>点击按钮弹出二维码</title>
<style>
/* 二维码弹出背景 */
.qrcode-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: none;
z-index: 9999;
}
/* 倒计时 */
.countdown {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #fff;
}
/* 二维码图片 */
.qrcode-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
display: none;
}
/* 支付成功动画 */
.success-animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
display: none;
}
</style>
</head>
<body>
<button onclick='showQrcode()'>点击弹出二维码</button>
<div class='qrcode-modal'>
<div class='countdown'></div>
<img src='' alt='二维码' class='qrcode-img'>
<div class='success-animation'>支付成功</div>
</div>
<script>
function showQrcode() {
var modal = document.querySelector('.qrcode-modal');
modal.style.display = 'block';
var countdown = document.querySelector('.countdown');
var timeLeft = 10;
var countdownInterval = setInterval(function() {
countdown.innerHTML = '倒计时：' + timeLeft;
timeLeft--;
if (timeLeft < 0) {
clearInterval(countdownInterval);
countdown.innerHTML = '';
var qrcodeImg = document.querySelector('.qrcode-img');
qrcodeImg.style.display = 'block';
qrcodeImg.setAttribute('src', '二维码图片链接');
qrcodeImg.onload = function() {
qrcodeImg.style.display = 'block';
}
animateQrcode();
}
}, 1000);
}
<pre><code> function animateQrcode() {
var qrcodeImg = document.querySelector('.qrcode-img');
qrcodeImg.style.animation = 'bounceInUp 1s ease';
qrcodeImg.style.webkitAnimation = 'bounceInUp 1s ease';
qrcodeImg.style.display = 'block';
qrcodeImg.addEventListener('animationend', function() {
qrcodeImg.style.animation = '';
qrcodeImg.style.webkitAnimation = '';
});
setTimeout(function() {
qrcodeImg.style.animation = 'bounceOutDown 1s ease';
qrcodeImg.style.webkitAnimation = 'bounceOutDown 1s ease';
qrcodeImg.addEventListener('animationend', function() {
qrcodeImg.style.animation = '';
qrcodeImg.style.webkitAnimation = '';
qrcodeImg.style.display = 'none';
showSuccessAnimation();
});
}, 5000);
}
function showSuccessAnimation() {
var successAnimation = document.querySelector('.success-animation');
successAnimation.style.animation = 'fadeIn 1s ease';
successAnimation.style.webkitAnimation = 'fadeIn 1s ease';
successAnimation.style.display = 'block';
successAnimation.addEventListener('animationend', function() {
successAnimation.style.animation = '';
successAnimation.style.webkitAnimation = '';
});
setTimeout(function() {
successAnimation.style.animation = 'fadeOut 1s ease';
successAnimation.style.webkitAnimation = 'fadeOut 1s ease';
successAnimation.addEventListener('animationend', function() {
successAnimation.style.animation = '';
successAnimation.style.webkitAnimation = '';
successAnimation.style.display = 'none';
var modal = document.querySelector('.qrcode-modal');
modal.style.display = 'none';
});
}, 3000);
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ogze 著作权归作者所有。请勿转载和采集!