css实现一个可调整节拍的节拍器动画效果代码-html代码-BFW代码库

css实现一个可调整节拍的节拍器动画效果代码

代码语言：html

代码描述：css实现一个可调整节拍的节拍器动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        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.........完整代码请登录后点击上方下载按钮下载查看