[分享]css两张图片做呼吸灯

CSS是网页设计中不可或缺的一部分。它可以让我们实现各种各样想象中的样式效果，其中之一就是呼吸灯效果。下面是一组使用CSS制作的呼吸灯效果的图片。/样式1/ .breathing1 { animati...

CSS是网页设计中不可或缺的一部分。它可以让我们实现各种各样想象中的样式效果，其中之一就是呼吸灯效果。

下面是一组使用CSS制作的呼吸灯效果的图片。

/*样式1*/
.breathing-1 {
    animation: breathing 4s ease-out infinite;
}

/*样式2*/
.breathing-2 {
    animation: breathing 6s ease-out infinite alternate;
}

/*动画实现*/
@keyframes breathing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
} 

上述代码中，我们定义了两个呼吸灯样式：.breathing-1和.breathing-2。其中，.breathing-1每4秒钟执行一次呼吸灯效果，.breathing-2每隔6秒钟执行一次呼吸灯效果，动画表现形式为交替进行。

我们使用了CSS3的动画属性animation，其中animation属性值包括实现动画的关键帧名称breathing、动画执行时间、动画缓动效果、动画执行次数等。

在breathing关键帧中，我们采用了transform动画属性表现呼吸灯的尺寸缩放效果，opacity动画属性表现透明度效果。

通过以上代码，我们可以纯CSS方式轻松地实现呼吸灯效果。