<html>
<div class="triangle-container">
<div class="triangle">
<div class="inner-triangle"></div>
</div>
</div>
<div class="square-container">
<div class="square">
</div>
</div>
<div class="circle-container">
<div class="circle">
</div>
</div>
</html>
html {
background: #F1F1F1;
height: 100vh;
overflow:hidden;
}
.triangle {
width: 0;
height: 0;
border-left: 350px solid transparent;
border-right: 350px solid transparent;
border-bottom: 606.2px solid #7CC7FF;
}
.inner-triangle {
position: relative;
left: -325px;
top: 30px;
width: 0;
height: 0;
border-left: 325px solid transparent;
border-right: 325px solid transparent;
border-bottom: 562.9px solid #F1F1F1;
}
.triangle {
animation: clockwise-rotation 120s linear infinite;
}
.triangle-container {
height: 1200px;
width: 1200px;
position: absolute;
top: 10vh;
left: 60vw;
animation: clockwise-rotation 130s linear infinite;
}
@keyframes clockwise-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
}
@keyframes counterclockwise-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg); }
}
.square {
width: 550px;
height: 550px;
border: 15px solid #FDD600;
animation: counterclockwise-rotation 140s linear infinite;
}
.square-container{
/* background: #ff00ff; */
height: 1200px;
width: 1200px;
position: absolute;
top: -50%;
left: -10%;
animation: counterclockwise-rotation 155s linear infinite;
}
@keyframes circle-self-rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg); }
}
.circle {
width: 650px;
height: 650px;
border: 15px solid #6EEDD8;
border-radius:100%;
}
.circle-container{
height: 900px;
width: 900px;
position: absolute;
top: 50vh;
left: -10vw;
animation: clockwise-rotation 145s linear infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.