css3鼠标点击出现波浪动态效果案例现场

130 阅读 0 评论 86 点赞

我是靠谱客的博主酷酷奇迹，最近开发中收集的这篇文章主要介绍css3鼠标点击出现波浪动态效果案例现场，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

css3鼠标点击出现波浪动态效果案例现场
话不多说先上图：
这里写图片描述
代码：（有es6语法注意兼容问题，推荐Chrome打开）

<html>
    <body>
        <div class="g-container">
        </div>
    </body>
</html>
<script src="jquery.js"></script>
<script>
    (function() {
            let x, y;
            let index = 0;
            let screenSizeWidth = $('body').width();
            let screenSizeHeight = $('body').height();
            let halfvmin = (screenSizeWidth > screenSizeHeight ? screenSizeHeight / 2 : screenSizeWidth / 2) * 0.8;
            $(document).on("click", function(e) {
                x = e.pageX;
                y = e.pageY;
                waveMove(x, y, index++);
            });
            function waveMove(x, y, z) {
                $(".g-container").append(`
                    <div class="g-position g-position${z}" style="top:${y - halfvmin}px; left:${x - halfvmin}px; z-index:${z}">
                        <div class="g-center">
                            <div class="wave g-wave1"></div>
                            <div class="wave g-wave2"></div>
                            <div class="wave g-wave3"></div>
                            <div class="wave g-wave4"></div>
                        </div>
                    </div>
                `);
                setTimeout(function() {
                    $(`.g-position${z}`).remove();
                }, 3000);
            }
        })();
</script>
<style lang="">
body,
html {
    width: 100%;
    height: 100%;
}
.g-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=');
    background-attachment: fixed;
    background-position: center center; 
    background-size: auto 100%;
    overflow: hidden;
    cursor: pointer;
}
.g-position {
    position:absolute;
    width: 80vmin;
    height: 80vmin;
}
.g-center {
    position: relative;
    width: 100%;
    height: 100%;
}
.wave {
    position: absolute;
    top: calc((100% - 20vmin)/2);
    left: calc((100% - 20vmin)/2);
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=);
    background-attachment: fixed;
    background-position: center center;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    transition: all .2s;
}
.g-wave1 {
    background-size: auto 106%;
    animation: wave 1s ease-out .1s;
    animation-fill-mode: forwards;
    z-index: 10;
}

.g-wave2 {
    background-size: auto 102%;
    animation: wave 1s ease-out .15s;
    animation-fill-mode: forwards;
    z-index: 20;
}
.g-wave3 {
    background-size: auto 104%;
    animation: wave 1s ease-out .25s;
    animation-fill-mode: forwards;
    z-index: 30;
}
.g-wave4 {
    background-size: auto 100%;
    animation: wave 1s ease-out .4s;
    animation-fill-mode: forwards;
    z-index: 40;
}
@keyframes wave {
    0% {
        top: calc((100% - 20vmin)/2);
        left: calc((100% - 20vmin)/2);
        width: 20vmin;
        height: 20vmin;
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        top: calc((100% - 80vmin)/2);
        left: calc((100% - 80vmin)/2);
        width: 80vmin;
        height: 80vmin;
        opacity: 0;
    }
}
</style>