CSS Метроном - пример html js css

• HTML код


• CSS код
• Результат кода

<input type="checkbox" id="off">

<input type="radio" name="frecuencia" id="f0"> 

<input type="radio" name="frecuencia" id="f1"> 

<input type="radio" name="frecuencia" id="f2">

<input type="radio" name="frecuencia" id="f3" checked> 

<input type="radio" name="frecuencia" id="f4">

<input type="radio" name="frecuencia" id="f5">

<div id="metronom">

    <div id="tic">Tic<i>!</i></div> 

    <div id="toc">Toc<i>!</i></div>       

    <div id="fons"></div>

    <div id="pendul">

        <div id="pes"></div>

    </div>

    <div id="tap">

        <div id="suportLabel">

            <label for="off">Off</label>

            <label for="f0">1</label>

            <label for="f1">2</label><br>

            <label for="f2">3</label> 

            <label for="f3">4</label> 

            <label for="f4">5</label> 

            <label for="f5">6</label> 

        </div>

    </div>

   

</div>

<div lang="ca" id="terra">metrònom</div>

body{

font-size: 16px;

font-family: sans-serif;

background-image: linear-gradient(60deg, lightgray 5%,white 15%, lightgray 55% , lightgray 90%);

background-size: 100%;

background-attachment: fixed;

margin:0;

overflow-x: hidden;

}

#metronom{

width: 250px;

height: 500px;

margin: 5px auto 2px auto;

position:relative;

display:flex;

justify-content: center;

}

#fons,#tap{

width: 100%;

height: 100%;

background:#111; 

clip-path:polygon(0 100%, 100% 100%, 65% 3%, 50% 0, 35% 3%);

position:absolute;

}

#pendul{

width: 10px;

height:70%;

background-color: gold;

border:1px solid black;

position:absolute;

top:11%;

display:flex;

justify-content: center;

transform-origin: center bottom;

padding-top:var(--paddingTop);

box-sizing: border-box;

animation-name: ticToc;

animation-duration: var(--animationDuration);

animation-iteration-count: infinite;

animation-direction: alternate-reverse;

animation-timing-function:linear;

transition:.3s

}

#pes{

width: 40px;

height: 40px;

position:absolute;

border:1px solid black;

background-color: gold;

}

#tap{

top:0;

background:linear-gradient(#333 10%, transparent 10%, transparent 75%, #333 75%);   

}  

#f0:checked ~ #metronom{

--animationDuration: 2.4s;

--paddingTop: 0;

}

#f1:checked ~ #metronom{

--animationDuration: 2s;

--paddingTop: 20%;

}

#f2:checked ~ #metronom{

--animationDuration: 1.6s;

--paddingTop: 40%;

}

#f3:checked ~ #metronom{

--animationDuration: 1.2s;

--paddingTop: 60%;

}

#f4:checked ~ #metronom{

--animationDuration: .8s;

--paddingTop: 80%;

}

#f5:checked ~ #metronom{

--animationDuration: .4s;

--paddingTop: 100%;

} 

#off:checked ~ #metronom{

--animationDuration: 0s;

} 

#suportLabel{

position: absolute;

top:  78%;

width: 90%;

left:5%;

text-align: center;

}

label{

font-size: 20px;

display: inline-block;

line-height: 35px;

width: 35px;

text-align: center;

color:gray;

border:1px solid gray;

transition:.3s;

margin:5px;

cursor:pointer;

}

#f0:checked ~ * label[for=f0],#f1:checked ~ * label[for=f1],#f2:checked ~ * label[for=f2],#f3:checked ~ * label[for=f3],#f4:checked ~ * label[for=f4],#f5:checked ~ * label[for=f5],#off:checked ~ * label[for=off]{

color:white;

border-color:white;

}

input{

display:none;

}

#terra{

height: 1px;

width: 98%;

margin: auto;

background-color:black;

color:black;

font-size:24px;

text-align:center

}

@keyframes ticToc {

from {transform:rotate(30deg);}

to {transform:rotate(-30deg);}

}

#tic,#toc{

color:black;

top:0;

font-size: 72px;

font-weight: bold;

font-family:cursive;

height: 100%;

transform-origin:center 100%;

position:absolute;

animation-name: onomatopeia;

transform:rotate(-23deg);

opacity:0;

animation-duration:calc( var(--animationDuration) * 2);

animation-iteration-count: infinite;

}

#tic>i,#toc>i{

vertical-align:.5rem;

color:gray;

font-size: 80px;

}

#toc{

transform:rotate(23deg);

animation-delay: var(--animationDuration);

}

@keyframes onomatopeia {

0% {opacity: 0;}

5% {opacity: 1;}

65% {opacity:0;}

}