<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3点击按钮爆炸特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
/* 按钮样式 */
.explode-btn {
position: relative;
padding: 15px 30px;
font-size: 18px;
color: white;
background: linear-gradient(45deg, #ff5252, #ff4081);
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(255, 82, 82, 0.4);
overflow: hidden;
outline: none;
transition: transform 0.3s, box-shadow 0.3s;
z-index: 1;
}
.explode-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 82, 82, 0.6);
}
.explode-btn:active {
transform: translateY(1px);
}
/* 爆炸粒子 */
.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ffeb3b;
opacity: 0;
}
/* 爆炸动画 */
.explode-btn:focus {
animation: explode 0.5s forwards;
}
.explode-btn:focus .particle {
animation: particle-move 1s forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes particle-move {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(var(--tx), var(--ty));
opacity: 0;
}
}
/* 重新出现动画 */
.reappear {
animation: reappear 0.5s 1s forwards;
opacity: 0;
transform: scale(0);
}
@keyframes reappear {
0% {
transform: scale(0);
opacity: 0;
}
70% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* 底部链接 */
.footer-link {
position: fixed;
bottom: 20px;
color: #666;
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.footer-link:hover {
color: #ff5252;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<button class="explode-btn" id="explodeBtn">
点击爆炸
<div class="particles" id="particles"></div>
</button>
</div>
<script>
const explodeBtn = document.getElementById('explodeBtn');
const particlesContainer = document.getElementById('particles');
// 创建爆炸粒子
function createParticles() {
// 清空现有粒子
particlesContainer.innerHTML = '';
// 创建30个粒子
for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机颜色
const colors = ['#ffeb3b', '#ff5252', '#ff4081', '#e91e63', '#9c27b0'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
particle.style.background = randomColor;
// 随机大小
const size = Math.random() * 8 + 4;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 随机位置和运动方向
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 100 + 50;
const tx = Math.cos(angle) * distance;
const ty = Math.sin(angle) * distance;
particle.style.setProperty('--tx', `${tx}px`);
particle.style.setProperty('--ty', `${ty}px`);
// 随机动画延迟
particle.style.animationDelay = `${Math.random() * 0.5}s`;
particlesContainer.appendChild(particle);
}
}
// 点击按钮事件
explodeBtn.addEventListener('click', function() {
// 创建粒子
createParticles();
// 触发爆炸动画
this.classList.add('reappear');
this.focus();
// 重置按钮状态
setTimeout(() => {
this.classList.remove('reappear');
}, 1500);
});
</script>
</body>
</html>
扫一扫
6112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
