#id2 { width:500px; height:300px; } .img { position:absolute; width:100% /*让所有图片显示在一个位置,设置绝对位置*/ opacity:0; animation:Aimg 12s infinite; /*设置图片轮播一次时间,以及轮播方式(无限循环)*/ } @keyframes Aimg { 0% { /*在百分之零时图片完全不可见*/ opacity:0; } 1% { opacity:0.3; } 2% { opacity:0.5; } 3% { opacity:0.8; } 4% { opacity:1; } 24% { opacity:1; } 25% { /*在此时本张图片显示结束,不透明度设置为0*/ opacity:0; } }img:nth-child(0) { animation-delay:0s; } /*设置下一个子元素延迟时间*/ img:nth-child(1) { animation-delay:3s; } img:nth-child(2) { animation-delay:6s; } img:nth-child(3) { animation-delay:9s; }
更新时间:2021-07-14 09:23:40
图片路径可自由修改