spoocykins/waves
1
0
Fork 0
forked from sent/waves
Code Pull Requests Activity

Kaboom

Browse Source
This commit is contained in:
sent 2025-04-15 12:58:18 -07:00
parent 5846fa2127
commit 3f66f91d8a
1 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
dum.html Normal file
View File

@ -0,0 +1,70 @@
<html>
<head>
<meta charset="UTF-8">
<title>explosive baboon</title>
<style>
body,html {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#explosion {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50vw;
pointer-events: none;
z-index: 2;
animation: flicker 0.08s infinite;
--baseOpacity: 1;
}
@keyframes flicker {
0% {
opacity: var(--baseOpacity);
transform: translate(-50%,-50%) scale(1);
filter: drop-shadow(0 0 15px #ff0000) hue-rotate(20deg) saturate(1.5);
}
20% {
opacity: calc(var(--baseOpacity) * 0.8);
transform: translate(-50%,-50%) scale(1.05);
filter: drop-shadow(0 0 20px #ff0000) hue-rotate(20deg) saturate(1.7);
}
40% {
opacity: var(--baseOpacity);
transform: translate(-50%,-50%) scale(0.95);
filter: drop-shadow(0 0 15px #ff0000) hue-rotate(20deg) saturate(1.5);
}
60% {
opacity: calc(var(--baseOpacity) * 0.5);
transform: translate(-50%,-50%) scale(1.1);
filter: drop-shadow(0 0 25px #ff0000) hue-rotate(20deg) saturate(2);
}
80% {
opacity: var(--baseOpacity);
transform: translate(-50%,-50%) scale(1);
filter: drop-shadow(0 0 15px #ff0000) hue-rotate(20deg) saturate(1.5);
}
100% {
opacity: var(--baseOpacity);
transform: translate(-50%,-50%) scale(1);
filter: drop-shadow(0 0 15px #ff0000) hue-rotate(20deg) saturate(1.5);
}
}
</style>
</head>
<body>
<div id="container">
<img id="explosion" src="explode.jpeg" alt="Explosion">
</div>
</body>
</html>