.rainbow1-magenta { position: absolute; width: 500px; height: 250px; /* as the half of the width */ border-top-left-radius: 290px; /* 250px of height + 40px of border*/ border-top-right-radius: 290px; /* 250px of height + 40px of border */ border: 40px solid magenta; border-bottom: 0; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; }
.rainbow1-purple { position: absolute; width: 420px; height: 210px; /* as the half of the width */ border-top-left-radius: 250px; /* 210px of height + 40px of border*/ border-top-right-radius: 250px; /* 210px of height + 40px of border*/ border: 40px solid #BC15DB; border-bottom: 0; margin-top: 40px; margin-left: 40px; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; animation-delay: 0.5s; }
.rainbow1-blue { position: absolute; width: 340px; height: 170px; /* as the half of the width */ border-top-left-radius: 210px; /* 170px of height + 40px of border*/ border-top-right-radius: 210px; /* 170px of height + 40px of border*/ border: 40px solid lightblue; border-bottom: 0; margin-top: 80px; margin-left: 80px; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; animation-delay: 1s; }
.rainbow1-green { position: absolute; width: 260px; height: 130px; /* as the half of the width */ border-top-left-radius: 170px; /* 130px of height + 40px of border*/ border-top-right-radius: 170px; /* 130px of height + 40px of border*/ border: 40px solid #21FF5C; border-bottom: 0; margin-top: 120px; margin-left: 120px; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; animation-delay: 1.5s; }
.rainbow1-yellow { position: absolute; width: 180px; height: 90px; /* as the half of the width */ border-top-left-radius: 130px; /* 90px of height + 40px of border*/ border-top-right-radius: 130px; /* 90px of height + 40px of border*/ border: 40px solid yellow; border-bottom: 0; margin-top: 160px; margin-left: 160px; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; animation-delay: 2s; }
.rainbow1-orange { position: absolute; width: 100px; height: 50px; /* as the half of the width */ border-top-left-radius: 90px; /* 50px of height + 40px of border*/ border-top-right-radius: 90px; /* 50px of height + 40px of border*/ border: 40px solid orange; border-bottom: 0; margin-top: 200px; margin-left: 200px; transform-origin: center bottom; transform: rotate(180deg); animation: runRainbow 10s linear infinite; animation-delay: 2.5s; }
@keyframes runRainbow{ 25% {transform: rotate(360deg);} 50% {transform: rotate(360deg);} 75% {transform: rotate(180deg);} 100% {transform: rotate(180deg);} }