Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Colorful Rotating Triangle Animation</title>
<style>
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d);
overflow: hidden;
}
.triangle-container{
position: relative;
width: 150px;
height: 150px;
}
.triangle {
position: absolute;
top: 0%;
left: 0%;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 125px solid;
transform-origin:50% 100% ;
animation: roratePulse 4s linear infinite;
}
.triangle:nth-child(1) {
border-bottom-color:#ff5733 ;
transform: scale(1);
animation-delay: 0s;
}
.triangle:nth-child(2) {
border-bottom-color: #33ff57;
transform: scale(0.9) rotate(60deg);
animation-delay: 0.4s;
}
.triangle:nth-child(3) {
border-bottom-color: #5733ff;
transform: scale(0.8) rotate(120deg);
animation-delay: 0.8s;
}
.triangle:nth-child(4) {
border-bottom-color: #faff33;
transform: scale(0.7) rotate(180deg);
animation-delay: 1.2s;
}
.triangle:nth-child(5) {
border-bottom-color: #33faff;
transform: scale(0.6) rotate(240deg);
animation-delay: 1.6s;
}
@keyframes roratePulse {
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
}
100%{
transform: scale(1) rotate(360deg);
}
}
</style>
</head>
<body>
<div class=”triangle-container”>
<div class=”triangle”></div>
<div class=”triangle”></div>
<div class=”triangle”></div>
<div class=”triangle”></div>
<div class=”triangle”></div>
</div>
</body>
</html>
