Wechat clap a simple version
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wxBox {
            width: 800px;
            height: 800px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 10px
        }

        li {
            list-style: none;
            display: flex;
            width: 100%;
            height: 70px;
            /* background-color: red; * /
        }

        li img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            cursor: pointer;
            /* animation: transKe 0.5s infinite; * /
        }

        .pypInfo p {
            display: none;
        }

        .right {
            width: 100%;
        }

        .rightBottom {
            width: 30%;
            line-height: 30px;
            border-radius: 5px;
            padding-left: 10px;
            margin-top: 5px;
            background-color: #f1f1f1;
        }

        @keyframes transKe {
            0% {
                transform: rotate(0deg);
            }

            10% {
                transform: rotate(-6deg);
            }

            30% {
                transform: rotate(6deg);
            }

            60% {
                transform: rotate(-6deg);
            }

            90% {
                transform: rotate(6deg);
            }

            100% {
                transform: rotate(0deg); }}</style>
</head>

<body>
    <div class="wxBox">
        <ul>
            <li>
                <img class="transferImg" src="./img//userIcon.jpg" alt="">
                <div class="right">
                    <p>Next to the Lao wang</p>
                    <p class="rightBottom">Click on your avatar to experience taking a picture</p>
                </div>

            </li>
        </ul>
        <div class="pypInfo">
            <p style="text-align: center; color: #ccc; margin-top: 10px;">You patted Lao Wang next door</p>
        </div>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        let imgClick = document.querySelector('li')
        let imgIcon = document.querySelector('.transferImg')
        let pypInfo = document.querySelector('.pypInfo p')
        imgClick.ondblclick = function () {
            // Start animation
            imgIcon.style.animation = 'transKe 0.5 s 0 s infinite'
            // Close the animation
            setTimeout(() = > {
                imgIcon.style.animation = ' '
                pypInfo.style.display = 'block'
            }, 200); }}</script>
Copy the code
There is no difficulty. I just want to know something about animation and how to realize the new function of wechat