Hallo,
hier ist mein Code:
<a href="https://codepen.io/nicerboy/pen/ZgBRRz">https://codepen.io/nicerboy/pen/ZgBRRz</a>
Leider schaffe ich es nicht, dass sich .cls2 und .cls3 bei Klick auf den roten Button einfärben.
(Die weiße Form im Hintergrund brauche ich noch.)
Wie kann man das machen?
Liebe Grüße
Code
<style>
#all{
display:flex;
}
[type=checkbox]{
position:fixed;
top:0;
left:-2000px;
}
label{
height: 20px;
width: 20px;
background-color: red;
cursor: pointer;
border:2px solid lightgrey;
margin-left: 10px;
order:2;
}
.icon {
width: 80px;
display: inline-block;
position: relative;
vertical-align: top;
}
#check:checked~div > svg{
fill:red;
}
.icon svg {
position: absolute;
width: 80px;
left: 0;
top: 0;
opacity: 0;
}
.icon svg#frame1 {
animation: ani 6s infinite;
}
.icon svg#frame2 {
animation: ani 6s infinite;
animation-delay: 2s;
}
.icon svg#frame3 {
animation: ani 6s infinite;
animation-delay: 4s;
}
@keyframes ani
{
0% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body translate="no" >
<div id="all">
<label for="check"></label>
<input id="check" type="checkbox">
<div class="icon">
<svg id="frame1" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M42.05,49.65c-2.75,2.93-4.24,4-6.6,5a12.2,12.2,0,0,1-4.23.82,8.61,8.61,0,0,1-7.46-4.09c-1.4-2.5-2-5.87-2-10.64,0-9.81,3-15,8.67-15a9.3,9.3,0,0,1,6.26,2.65c2.07,1.83,3.17,3.42,4.81,7h1.15v-11H41.37c-.72,1.68-1.15,2.17-2.11,2.17a6.74,6.74,0,0,1-2.17-.63,18.13,18.13,0,0,0-7.27-1.69c-9.38,0-16.41,7.22-16.41,17s6.88,16.56,16.7,16.56c5.39,0,8.62-1.69,13.38-6.89l-1.44-1.2Z" transform="translate(0 0)"/></svg>
<svg id="frame2" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/><path class="cls-3" d="M44.6,25H34.54v1.15c3.42.24,4.09.63,4.09,2.12,0,.77-.1,1-1,3.32l-6,15.5L25.15,31.31c-.86-2.12-1.06-2.7-1.06-3.37,0-1.11.73-1.59,2.51-1.68.24-.05.86-.05,1.54-.15V25H12.3v1.15c2.36.39,2.79.72,3.95,3.32L28.33,57.69h1.25L40.36,30c1.16-2.94,1.78-3.51,4.24-3.9V25Z" transform="translate(0 0)"/></svg>
<svg id="frame3" viewBox="0 0 56.9 73.13" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="white" d="M56.9,73.13H0V0H44.78L56.9,12.11Z" transform="translate(0 0)"/><path class="cls-2" d="M56.9,73.13H0V0H44.78L56.9,12.11ZM2.12,71H54.78V14.23H42.66V2.12H2.12Zm42.66-58.9H53.9L44.78,3Z" transform="translate(0 0)"/></svg>
</div>
</div>
</body>