菜单动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #line{
            margin: 0 auto;
            background-color: aqua;
            transition: width 1s;
        }
    </style>
</head>
<body>

<div>
    <h1 id="title" style="margin: 0;text-align: center">
        切换效果
    </h1>
    <div id="line" style="width: 0"></div>
    <button id="btn">click</button>
</div>

<script>

    window.onload=()=>{
        let line=document.getElementById('line')
        let title=document.getElementById('title')

        document.getElementById('btn').addEventListener('click',function (){
            let width=parseInt(line.style.width)
            if(width<100){
                line.style.width='100px'
                line.style.height='3px'
                title.style.color='aqua'
            }else {
                line.style.width='0px'
                title.style.color='#000'
            }
        })
    }

</script>
</body>
</html>