登录用户协议-JZTXT

https://blog.csdn.net/weixin_39788960/article/details/113022240
<!DOCTYPE html>
<html>

<head>
    <style>
        .shape {
            margin: 50px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        .shake {
            animation: shake 800ms ease-in-out;
        }
        @keyframes shake { /* 垂直抖动，核心代码 */
            10%, 90% { transform: translate3d(0, -1px, 0); }
            20%, 80% { transform: translate3d(0, +2px, 0); }
            30%, 70% { transform: translate3d(0, -4px, 0); }
            40%, 60% { transform: translate3d(0, +4px, 0); }
            50% { transform: translate3d(0, -4px, 0); }
        }
    </style>
    <script>
        function shake(elemId) {
            let elem = document.getElementById(elemId)
            if (elem) {
                elem.classList.add('shake')
                setTimeout(()=>{ elem.classList.remove('shake') }, 800)
            }
        }
    </script>
</head>

<body>
    <div class="shape" id="shake" onclick="shake(this.id)">vertical shake</div>
</body>

</html>