CSS3实现发光按钮效果动画

在平时看到抽奖，或者一些活动内容页面，我们经常会看到一些发光效果的按钮，视觉上引导用户去点击，这种效果主要是利用css3的动画效果去实现，关键帧放大元素尺寸和改变元素的不透明度，还有就是渐变拉伸去设置对应的按钮渐变。

效果如下：

css3实现发光按钮效果

background-image: linear-gradient(to bottom right, #ef1212, #ff9800)

@keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .border {
            width: 120px;
            height: 120px;
            background-color: #ff9800;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            animation: spread linear 1.5s infinite;
        }
        .border2 {
            width: 120px;
            height: 120px;
            background-color: #ff9800;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            animation: spread2 linear 3s infinite;
        }

        .draw {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            color: #ffffff;
            border-radius: 50px;
            cursor: pointer;
            /* position: absolute; */
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0; */
            /* margin: 10px auto; */
            position: fixed;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            background-image: linear-gradient(to bottom right, #ef1212, #ff9800)
        }

        @keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }
        @keyframes spread {
            from {
                width: 120px;
                height: 120px;
                opacity: 1
                    /* transform: scale(1); */
            }

            to {
                width: 140px;
                height: 140px;
                opacity: 0;
                /* transform: scale(1.5); */
            }
        }
    </style>
</head>

<body>
    <div class="border">

    </div>
    <div class="border2">

    </div>
    <div class="draw">
        参与抽奖
    </div>

</body>

</html>

CSS3实现发光按钮效果动画

猜你喜欢