Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>CSS Illusion Effects</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
color: white;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.hover-illusion {
position: relative;
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ff3e3e, #3e3eff);
overflow: hidden;
}
.hover-illusion::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle,
transparent,
rgba(0, 0, 0, 0.5));
transform: scale(0);
transition: transform 0.3s ease;
}
.hover-illusion:hover::before {
transform: scale(1.5);
}
.moving-lines {
position: relative;
width: 300px;
height: 20px;
background: repeating-linear-gradient(90deg,
#ffffff, #ffffff 10px,
#1a1a1a 10px, #1a1a1a 20px);
animation: move 2s linear infinite;
}
@keyframes move {
0% {
background-position: 0;
}
100% {
background-position: 40px;
}
}
</style>
</head>
<body>
<div class=”container”>
<div class=”hover-illusion”></div>
<div class=”moving-lines”></div>
</div>
</body>
</html>
