前端C3属性模仿支付宝咻一咻

最新推荐文章于 2023-11-08 16:19:53 发布

安静的对折

最新推荐文章于 2023-11-08 16:19:53 发布

阅读量720

点赞数

分类专栏： H5C3

本文链接：https://blog.csdn.net/k491022087/article/details/54237948

版权

H5C3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用c3的动画属性，来模拟支付宝的咻一咻功能，没有添加音频效果，可以使用H5的audio音频标签来实现音效播放

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            left: 0;
            top: 0;
            overflow: hidden;
            background: #1C2134;
        }
        .main > div {
            width: 130px;
            height: 130px;
            border-radius: 50%;
        }
        .main {
            position: relative;
        }
        .circle {
            border: 1px solid #ccc;
            position: absolute;
            opacity: 0;
        }
        .circle.go {
            /*圆圈2s执行完一次动画，无限执行*/
            animation: move 2s linear infinite;
        }
        img {
            /*鼠标显示手型*/
            cursor: pointer;
            position: absolute;
            border-radius: 50%;
        }
        /*逐渐放大4倍，并且变成透明*/
        @keyframes move {
            0% {
                transform: scale(1);
                opacity: 1;
            }100%{
                transform: scale(4);
                opacity: 0;
            }

        }
    </style>
</head>
<body>

<div class="main">
    <!--5个变大的圆圈-->
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="pho">
        <img src="imgs/xiuyixiu.png" alt=""/>
    </div>
</div>

<script>
//    给图片添加点击事件
    document.querySelector(".pho").onclick = function () {
        var cirs = document.querySelectorAll(".circle");
        for (var i = 0; i < cirs.length; i++) {
            //给每个圆圈添加类名
            cirs[i].classList.add("go");
            //动画延迟时间，每个圆圈间隔0.5s
            cirs[i].style.animationDelay = i * 0.5 + "s";
        }
    }
</script>
</body>
</html>

代码地址：代码链接地址