CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stretching Bandage Blocks</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
transition: background-color 0.6s ease; /* Smooth transition for background color change */
}
.container {
display: flex;
gap: 15px;
}
.block {
width: 80px;
height: 400px;
border-radius: 50px;
transition: all 0.4s ease;
cursor: pointer;
position: relative;
}
.block:hover {
width: 120px; /* Stretches the width */
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}
.block:nth-child(1) {
background: linear-gradient(45deg, #ff6f61, #ff9671);
}
.block:nth-child(2) {
background: linear-gradient(45deg, #6ab0ff, #3e8cff);
}
.block:nth-child(3) {
background: linear-gradient(45deg, #ffd54f, #ffca28);
}
.block:nth-child(4) {
background: linear-gradient(45deg, #ab47bc, #ce93d8);
}
.block:nth-child(5) {
background: linear-gradient(45deg, #4db6ac, #26a69a);
}
.block.disappear {
animation: glow-disappear 0.8s forwards;
}
@keyframes glow-disappear {
0% {
transform: scale(1);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
50% {
transform: scale(1.2);
opacity: 0.5;
}
100% {
transform: scale(0);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script>
// Select all blocks
const blocks = document.querySelectorAll(".block");
blocks.forEach(block => {
block.addEventListener("click", (e) => {
// Prevent any hover effects after click
block.style.pointerEvents = "none";
// Get the computed background of the clicked block
const blockBackground = window.getComputedStyle(block).backgroundImage;
// Immediately set the body's background to the clicked block's background
document.body.style.background = blockBackground;
document.body.style.backgroundSize = "cover"; // Ensure it covers the entire background
// Add the 'disappear' class for glow and vanish effect
block.classList.add("disappear");
// Remove the block from DOM after animation ends
block.addEventListener("animationend", () => {
block.remove();
});});});
</script>
</body>
</html>
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR