首页 编程语言 css

使用CSS实现点击按钮出现气泡

效果图：

  • 所有代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn {
            width: 200px;
            height: 50px;
            background-color: orange;
            margin: 50px auto;
            text-align: center;
            line-height: 50px;
            position: relative;
        }

        .bubble {
            /* 气泡定位在按钮的正中间 */
            position: absolute;
            right: 0px;
            left: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;

            width: 200px;
            height: 200px;
            background: #fff;
            border-radius: 50%;

            transform: scale(1);
            opacity: 0;
            transition: all 0.5s;
        }

        .btn:active .bubble {
            opacity: 1;
            transform: scale(0);
            /*
                鼠标点击，然后bubble的缩放为0，透明度为1，transition给0是因为让整个过程瞬发
                由于动作触发完成后，会恢复原状，因此看到扩张的效果
                其实过程是：点击的一瞬间气泡缩放为0透明度为1，然后经过0.5s后缩放为1，透明度为0
                就出现了扩张的效果
             */
            transition: 0s;
        }
    </style>
</head>
<body>
<div class="btn">
    click
    <div class="bubble"></div>
</div>
</body>
</html>


相关推荐