[分享]css3发光背景动画效果

CSS3发光背景动画是一种很有趣的效果，可以为网页增添一些活力。下面我们通过代码的方式来实现它。/ 设置背景图片和颜色 / body { backgroundcolor: 202020; backgr...

CSS3发光背景动画是一种很有趣的效果，可以为网页增添一些活力。下面我们通过代码的方式来实现它。

/* 设置背景图片和颜色 */
body {
    background-color: #202020;
    background-image: url(背景图片链接);
    background-size: cover;
    overflow: hidden;
}

/* 设置发光效果 */
.glow {
    position: relative;
    display: inline-block;
    animation: glow 2s ease-in-out infinite alternate;
}

.glow::before, .glow::after {
    content: ';
    position: absolute;
    top: -10px; 
    right: -10px;
    bottom: -10px;
    left: -10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    z-index: -1;
}

.glow::after {
    filter: blur(30px);
}

/* 设置动画效果 */
@keyframes glow {
    from {
        transform: scale(1);
        filter: blur(0px);
    }
    to {
        transform: scale(1.2);
        filter: blur(10px);
    }
} 

以上代码中，我们首先设置了背景颜色和图片，并将浏览器窗口的滚动效果禁止掉，以便更好地显示效果。

接下来，我们定义了一个类名为“glow”的样式，它包含了实现发光效果的各种属性。我们以“::before”和“::after”为伪类选择器设置了两个透明度为0.2的白色背景，且都是圆形的，并且将它们的z-index属性设置为-1，以便让它们在父元素中向下为子元素提供荧光效果。在“::after”中还通过CSS的filter属性设置其模糊度，使其在荧光效果中更能吸引眼球。

最后，我们使用CSS3中的动画效果，设置动画名称叫“glow”（与元素类名相同），动画时长为2秒，缓动函数为“ease-in-out”，且无限循环交替播放。动画中通过transform属性和filter属性的值得变化，从而呈现出荧光效果的动态变化过程。

通过以上代码，我们就可以轻松实现CSS3发光背景动画效果了！