basti1012.bplaced.net

Ich würde gerne für meine noch nicht vorhandene Homepage ein Regenbogen haben. Der soll als Background sein und mit Css geschrieben werden,da ich den mal animieren möchte. Ist sowas möglich das nur mit Css zu machen ,ohne ein Bild einbinden zu müssen ?

Code

                                    
                                <style>
#conti {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 420px;
  height: 220px;
  background: black;
}

#red {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 200px;
  border-radius: 200px 200px 0 0;
  border: 10px solid red;
}

#orange {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 190px;
  border-radius: 190px 190px 0 0;
  border: 10px solid orange;
}

#yellow {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 360px;
  height: 180px;
  border-radius: 180px 180px 0 0;
  border: 10px solid yellow;
}

#green {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 340px;
  height: 170px;
  border-radius: 170px 170px 0 0;
  border: 10px solid green;
}

#blue {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 320px;
  height: 160px;
  border-radius: 160px 160px 0 0;
  border: 10px solid blue;
}

#violet {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  border: 10px solid violet;
}






#grass {
  position: absolute;
  bottom: 0px;
  left: 60px;
  width: 280px;
  height: 0px;
  border-radius: 10px 10px 0 0;
  border: 10px solid green;
}
.blumen{
  position: absolute;
  width: 5px;
  height: 100px;
  left: 200px;
  bottom: 0px;
  background: green;
  transform-origin: 100% 100%;
}
#blume2{
  height: 80px;
  transform: rotate(20deg);
}
#blume3{
  height: 80px;
  transform: rotate(-20deg);
}
.bluten{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 5px solid red;
  border-radius: 50%;
}
#blute1 {
  top: 115px;
  left: 220px;
}
#blute2 {
  top: 117px;
  left: 160px;
}
#blute3 {
  top: 95px;
  left: 186px;
}
#sonne {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  background: yellow;
  border-radius: 0 0 0 150px;
}
.sonne{
  position: absolute;
  width: 120px;
  height: 3px;
  top: 0px;
  right: 0px;
  background: yellow;
  transform-origin: 100% ;
}
#sonne1 {
transform: rotate(-1deg)
}
#sonne2 {
transform: rotate(-15deg)
}
#sonne3 {
  transform: rotate(-30deg)
}
#sonne4 {
  transform: rotate(-45deg)
}
#sonne5 {
  transform: rotate(-60deg)
}
#sonne6 {
  transform: rotate(-75deg)
}
#sonne7 {
  transform: rotate(-89deg)
}
</style>
<div id="conti">


  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
  <div id="violet"></div>
  <div id="grass"></div>
  <div id="blume1" class="blumen"> </div>
  <div id="blume2" class="blumen"></div>
  <div id="blume3" class="blumen"></div>
  <div id="blute1" class="bluten"></div>
  <div id="blute2" class="bluten"></div>
  <div id="blute3" class="bluten"></div>
  
  
  <div id="sonne"></div>
  <div id="sonne1" class="sonne"></div>
  <div id="sonne2" class="sonne"></div>
  <div id="sonne3" class="sonne"></div>
  <div id="sonne4" class="sonne"></div>
  <div id="sonne5" class="sonne"></div>
  <div id="sonne6" class="sonne"></div>
  <div id="sonne7" class="sonne"></div>
</div>