Regenbogen mit css 2
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 ?
Der hier verwendete Code
<style>
#conti {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 100%;
background: black;
}
#gesicht{
position: absolute;
top: 1%;
left: 10%;
width: 300px;
height:300px;
border-radius: 50%;
background:red;
overflow:hidden;
}
#augelinks{
position:absolute;
left:50px;
top:60px;
width:70px;
height:70px;
background:white;
border:2px solid black;
border-radius:50%;
overflow:hidden;
}
#augerechts{
position:absolute;
right:50px;
top:60px;
width:70px;
height:70px;
background:white;
border:2px solid black;
border-radius:50%;
}
.iris{
position:absolute;
width:25px;
height:25px;
background:black;
border:1px double black;
border-radius:50%;
overflow:hidden;
animation: iris 1s alternate infinite linear;
}
#irisrechts{
top:10px;
left:10px;
}
#irislinks{
top:10px;
right:10px;
}
@keyframes iris {
0%{left:10px;}
100%{left:30px;}
}
#mund1{
position:absolute;
left:50px;
top:200px;
width:200px;
height:20px;
background:white;
border:2px solid black;
border-radius:50px 50px 0px 0px;
z-index:3;
}
@keyframes mund2 {
0%{top:220px;}
100%{top:240px;}
}
#mund2{
position:absolute;
left:50px;
top:224px;
width:200px;
height:20px;
background:white;
border:2px solid black;
border-radius:0px 0px 50px 50px;
z-index:1;
animation: mund2 1s alternate infinite linear;
}
#zunge{
position:absolute;
width:50px;
height:0px;
top:212px;
left:calc(50% - 25px);
background:green;
border:1px solid black;
border-radius:0px 0px 50% 50%;
z-index:2;
transform-origin:50% 0%;
animation: zunge 2s alternate infinite linear;
}
@keyframes zunge {
0%{transform:rotate(30deg);height:0px;}
20%{transform:rotate(20deg);height:100px;}
50%{transform:rotate(0deg) ;height:100px;}
100%{transform:rotate(-30deg);height:0px;}
}
#nase1{
position:absolute;
top:45%;
left:37%;
width:15%;
height:15%;
border-left:10px solid blue;
border-bottom:10px solid blue;
border-radius:0 0 0 50%;
}
.lid{
position:absolute;
height:35px;
width:70px;
background:yellow;
border:1px solid black;
z-index:1;
overflow:hidden;
}
.lidtop{
border-radius:35px 35px 0 0;
animation: lidoben 1s alternate infinite linear;
}
@keyframes lidoben {
0%{top:60px;}
100%{top:40px;}
}
.lidbottom{
border-radius: 0 0 35px 35px;
animation: lidunten 1s alternate infinite linear;
}
@keyframes lidunten {
0%{top:100px;}
100%{top:120px;}
}
#lidtop1{
overflow:hidden;
top:60px;
left:50px;
}
#lidtop2{
overflow:hidden;
top:60px;
right:50px;
}
#lidbottom1{
overflow:hidden;
top:95px;
left:50px;
}
#lidbottom2{
overflow:hidden;
top:95px;
right:50px;
}
.haar{
position:absolute;
width:30px;
height:5px;
background:black;
z-index:5;
transform-origin:0% 100%;
animation: haare 1s alternate infinite linear;
}
@keyframes haare {
0%{transform:rotate(=+0deg)}
100%{transform:rotate(160deg);}
}
.haarmitte{
top:0px;
left:50%;
}
.haarlinks{
top:20px;
left:25%;
}
.haarrechts{
top:20px;
left:75%;
}
#haarm1{transform:rotate(30deg)}
#haarm2{transform:rotate(60deg)}
#haarm3{transform:rotate(90deg)}
#haarm4{transform:rotate(120deg)}
#haarm5{transform:rotate(150deg)}
#haarl1{transform:rotate(30deg)}
#haarl2{transform:rotate(60deg)}
#haarl3{transform:rotate(90deg)}
#haarl4{transform:rotate(120deg)}
#haarl5{transform:rotate(150deg)}
#haarr1{transform:rotate(30deg)}
#haarr2{transform:rotate(60deg)}
#haarr3{transform:rotate(90deg)}
#haarr4{transform:rotate(120deg)}
#haarr5{transform:rotate(150deg)}
</style>
<div id="conti">
<div id="gesicht">
<div id="haarm1" class="haar haarmitte"></div>
<div id="haarm2" class="haar haarmitte"></div>
<div id="haarm3" class="haar haarmitte"></div>
<div id="haarm4" class="haar haarmitte"></div>
<div id="haarm5" class="haar haarmitte"></div>
<div id="haarl1" class="haar haarlinks"></div>
<div id="haarl2" class="haar haarlinks"></div>
<div id="haarl3" class="haar haarlinks"></div>
<div id="haarl4" class="haar haarlinks"></div>
<div id="haarl5" class="haar haarlinks"></div>
<div id="haarr1" class="haar haarrechts"></div>
<div id="haarr2" class="haar haarrechts"></div>
<div id="haarr3" class="haar haarrechts"></div>
<div id="haarr4" class="haar haarrechts"></div>
<div id="haarr5" class="haar haarrechts"></div>
<div id="lidtop1" class="lid lidtop"></div>
<div id="augelinks"><div id="irislinks" class="iris"></div></div>
<div id="lidbottom1" class="lid lidbottom"></div>
<div id="lidtop2" class="lid lidtop"></div>
<div id="augerechts"><div id="irisrechts" class="iris"></div></div>
<div id="lidbottom2" class="lid lidbottom"></div>
<div id="nase1"></div>
<div id="mundconti">
<div id="mund1"></div>
<div id="zunge"></div>
<div id="mund2"></div>
</div>
</div>
</div>