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

你的名字 2022-05-13 06:38 256阅读 0赞

css3鼠标点击出现波浪动态效果案例现场  
话不多说先上图：  
![这里写图片描述][70]  
代码：（有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>

[70]: /images/20220513/2af9f7d41e3748cd80e8f7240a9b5f09.png