img { animation: disappear 3s; } @keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; } }
以上是CSS实现图片3秒消失的代码,通过animation动画实现。首先将图片的opacity(不透明度)从1(完全不透明)到0(完全透明)过渡,过渡时间为3秒,即消失时间为3秒。
可以根据需要调整过渡时间或不透明度的开始结束值来实现不同的效果。例如,改变开始值和结束值可以实现渐变消失的效果;将不透明度从0到1的过渡则可以实现渐变出现的效果。
如果需要为多个元素应用该动画效果,可以使用类选择器或通配符选择器。例如:.disappear { animation: disappear 3s; }
也可以通过JavaScript控制动画的开始和停止,例如:
var img = document.querySelector('img'); img.style.animationPlayState = 'paused'; // 停止动画 img.style.animationPlayState = 'running'; // 开始动画