CSS实现按钮点击的水波纹特效

最新推荐文章于 2024-05-27 11:09:28 发布

上弦月Z

最新推荐文章于 2024-05-27 11:09:28 发布

阅读量4.9k

点赞数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .waves{
            position:relative;
            cursor:pointer;
            display:inline-block;
            overflow:hidden;
            text-align: center;
            -webkit-tap-highlight-color:transparent;
            z-index:1;
        }
        .waves .waves-animation{
            position:absolute;
            border-radius:50%;
            width:25px;
            height:25px;
            opacity:0;
            background:rgba(255,255,255,0.3);
            transition:all 0.7s ease-out;
            transition-property:transform, opacity, -webkit-transform;
            -webkit-transform:scale(0);
            transform:scale(0);
            pointer-events:none
        }
        .btn{
            width: 200px;
            height: 56px;
            line-height: 56px;
            background: #1ABC9C;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<a class="waves btn">Click me!</a>
</body>
<script>
    document.addEventListener('DOMContentLoaded',function(){

        var duration = 750;

        // 样式string拼凑
        var forStyle = function(position){
            var cssStr = '';
            for( var key in position){
                if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';
            };
            return cssStr;
        }

        // 获取鼠标点击位置
        var forRect = function(target){
            var position = {
                top:0,
                left:0
            }, ele = document.documentElement;
            'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
            return {
                top: position.top + window.pageYOffset - ele.clientTop,
                left: position.left + window.pageXOffset - ele.clientLeft
            }
        }

        var show = function(event){
            var pDiv = event.target,
                cDiv = document.createElement('div');
            pDiv.appendChild(cDiv);
            var rectObj = forRect(pDiv),
                _height = event.pageY - rectObj.top,
                _left = event.pageX - rectObj.left,
                _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
            var position = {
                top: _height+'px',
                left: _left+'px'
            };
            cDiv.className = cDiv.className + " waves-animation",
                cDiv.setAttribute("style", forStyle(position)),
                position["-webkit-transform"] = _scale,
                position["-moz-transform"] = _scale,
                position["-ms-transform"] = _scale,
                position["-o-transform"] = _scale,
                position.transform = _scale,
                position.opacity = "1",
                position["-webkit-transition-duration"] = duration + "ms",
                position["-moz-transition-duration"] = duration + "ms",
                position["-o-transition-duration"] = duration + "ms",
                position["transition-duration"] = duration + "ms",
                position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                cDiv.setAttribute("style", forStyle(position));
            var finishStyle = {
                opacity: 0,
                "-webkit-transition-duration": duration + "ms",
                "-moz-transition-duration": duration + "ms",
                "-o-transition-duration": duration + "ms",
                "transition-duration": duration + "ms",
                "-webkit-transform" : _scale,
                "-moz-transform" : _scale,
                "-ms-transform" : _scale,
                "-o-transform" : _scale,
                top: _height + "px",
                left: _left + "px",
            };
            setTimeout(function(){
                cDiv.setAttribute("style", forStyle(finishStyle));
                setTimeout(function(){
                    pDiv.removeChild(cDiv);
                },duration);
            },100)
        }
        document.querySelector('.waves').addEventListener('click',function(e){
            show(e);
        },!1);
    },!1);
</script>
</html>

上弦月Z

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS实现按钮点击的水波纹特效

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .waves{ position:relative;
复制链接

扫一扫