css3写脉冲效果 |iecss3 滤镜filter

.pulse {
position: relative;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.7);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.7);
}
}

上面的代码中，大家创建了一个名为”pulse”的类，然后在其中添加了动画属性。动画持续时间设置为1秒，重复次数为无限。使用@keyframes属性来定义动画效果。在这里，大家分别定义了0%、50%和100%三个关键帧，分别对应不同的样式。

在0%的关键帧中，设置了缩放比例为1，阴影的透明度为0.7。50%的关键帧中，增加了缩放比例，使元素变大，阴影的透明度为0。在100%的关键帧中，恢复原来的样式。这样就形成了一个类似于脉冲的动画效果。

大家将该类应用于需要使用脉冲效果的元素上即可实现动画效果。这种效果可以应用于按钮、交互图标等，在网页设计中实现更加生动、富有动感的效果。