css3两张图不停改变

今天我们来学一下如何使用CSS3制作两张图不停改变的效果。

首先，我们先准备两张图片。一张是默认状态的图片，另一张是需要切换成的图片。

img src="default.jpg" id="pic">

接下来，我们可以使用CSS3中的animation属性和@keyframes规则来实现图片的动态效果。

#pic{
    animation: changePic 2s infinite alternate;
}
@keyframes changePic{
0%{
    opacity: 1;
}
50%{
    opacity: 0;
}
100%{
    opacity: 1;
    content: url('switch.jpg');
}
}
    

在上述代码中，我们首先给图片设置了id属性为“pic”，然后使用animation属性指定了动画名称为“changePic”，动画持续时间为2秒，重复次数为无限循环，轮流反向播放。

接着我们定义了@keyframes规则来设置动画的关键帧样式。关键帧样式是指在动画播放过程中，由于时间的变化，组成动画效果的多个状态。

其中，0%表示动画开始的状态，此时图片的透明度为1；50%表示动画中间的状态，此时图片的透明度为0；100%表示动画结束的状态，此时图片的透明度为1，并使用content属性把图片切换成了“switch.jpg”。

最后，我们就成功实现了两张图片不停改变的效果为。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！