Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Hexagon Illusion</title>
<style>
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #06144d, #063459, #4b061d);
overflow: hidden;
}
.hexagon{
position: relative;
width: 150px;
height: 150px;
transform: rotate(30deg);
animation: spin 6s linear infinite;
}
.hexagon div {
position: absolute;
height: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 130px solid;
transform-origin:center ;
}
.hexagon .slide1 {
transform: rotate(0deg) translateY(-30px);
border-bottom-color:#ff5733 ;
animation: colorShift 4s linear infinite;
}
.hexagon .slide2 {
transform: rotate(60deg) translateY(-30px);
border-bottom-color: #33ff57;
animation: colorShift 4s linear infinite 0.5s;
}
.hexagon .slide3 {
transform: rotate(120deg) translateY(-30px);
border-bottom-color: #5733ff;
animation: colorShift 4s linear infinite 1s;
}
.hexagon .slide4 {
transform: rotate(180deg) translateY(-30px);
border-bottom-color: #faff33;
animation: colorShift 4s linear infinite 1.5s;
}
.hexagon .slide5 {
transform: rotate(240deg) translateY(-30px);
border-bottom-color: #33faff;
animation: colorShift 4s linear infinite 2s;
}
.hexagon .slide6 {
transform: rotate(300deg) translateY(-30px);
border-bottom-color: #ff33aa;
animation: colorShift 4s linear infinite 2.5s;
}
@keyframes spin{
0%{
transform: rotate(30deg);
}
100%{
transform: rotate(390deg);
}
}
@keyframes colorShift {
0%, 100% {
filter: brightness(1);
}
50%{
filter: brightness(1.5);
}
}
</style>
</head>
<body>
<div class=”hexagon”>
<div class=”slide1″></div>
<div class=”slide2″></div>
<div class=”slide3″></div>
<div class=”slide4″></div>
<div class=”slide5″></div>
<div class=”slide6″></div>
</div>
</body>
</html>
