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