웹사이트에 Crazy Cursor 클릭 효과를 추가하세요..
- Patricia Arquette원래의
- 2024-11-13 14:31:02780검색
클릭하면 마법이 보입니다!
깃허브
미리보기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Diwali - Bomb Blast Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p><strong>CSS</strong><br>
</p>
<pre class="brush:php;toolbar:false">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(to bottom, #2c3e50, #4ca1af);
height: 100vh;
overflow: hidden;
color: white;
font-family: 'Arial', sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.container {
position: relative;
text-align: center; /* Center text */
font-size: 2em; /* Increase font size */
font-weight: bold; /* Make text bold */
color: #ffcc00; /* Text color */
text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.8); /* Add shadow for effect */
}
.bomb {
position: absolute;
width: 20px;
height: 20px;
background: #ffcc00;
border-radius: 50%;
animation: pulse 0.4s forwards;
}
.light {
position: absolute;
border-radius: 50%;
animation: lightSpread 1s forwards;
opacity: 0;
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes lightSpread {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
자바스크립트
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('container');
container.addEventListener('click', (e) => {
// Create the bomb element
const bomb = document.createElement('div');
bomb.className = 'bomb';
bomb.style.left = e.clientX + 'px';
bomb.style.top = e.clientY + 'px';
container.appendChild(bomb);
// Create light effects
for (let i = 0; i < 10; i++) {
const light = document.createElement('div');
light.className = 'light';
light.style.left = e.clientX + 'px';
light.style.top = e.clientY + 'px';
light.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
light.style.width = Math.random() * 20 + 10 + 'px'; // Random width
light.style.height = light.style.width; // Keep it circular
// Set a random angle and distance for spreading lights
const angle = Math.random() * 2 * Math.PI; // Random angle
const distance = Math.random() * 200 + 50; // Random distance
light.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
container.appendChild(light);
// Remove the light effect after animation
setTimeout(() => {
light.remove();
}, 1000);
}
// Remove the bomb after animation
setTimeout(() => {
bomb.remove();
}, 400);
});
});
위 내용은 웹사이트에 Crazy Cursor 클릭 효과를 추가하세요..의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.