微信拍一拍简易版微信拍一拍简易版没什么难点主要是了解一下动画的一些东西顺便了解一下微信新出的功能是怎么实现的

微信拍一拍简易版

<!DOCTYPE html>
<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 0s 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>隔壁老王</p>
                    <p class="rightBottom">点击头像体验拍一拍</p>
                </div>

            </li>
        </ul>
        <div class="pypInfo">
            <p style="text-align: center; color: #ccc; margin-top: 10px;">你拍了拍隔壁老王</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 () {
            // 开启动画
            imgIcon.style.animation = 'transKe 0.5s 0s infinite'
            // 关闭动画
            setTimeout(() => {
                imgIcon.style.animation = ''
                pypInfo.style.display = 'block'
            }, 200);
        }
    }
</script>

微信拍一拍简易版

微信拍一拍简易版

没什么难点 主要是了解一下动画的一些东西 顺便了解一下微信新出的功能是怎么实现的

没什么难点主要是了解一下动画的一些东西顺便了解一下微信新出的功能是怎么实现的