我有这个HTML / CSS：
<!DOCTYPE HTML><HTML> <head> <Meta charset="UTF-8"> <Title>CSS text slIDeshow</Title> <style> #slIDeshow { position: relative; wIDth: 500px; height: 300px; } .item { position: absolute; max-wIDth: 500px; opacity: 0; } .item:nth-child(1) { -webkit-animation: crossfade 48s 30s infinite; animation: crossfade 48s 30s infinite; } .item:nth-child(2) { -webkit-animation: crossfade 48s 24s infinite; animation: crossfade 48s 24s infinite; } .item:nth-child(3) { -webkit-animation: crossfade 48s 18s infinite; animation: crossfade 48s 18s infinite; } .item:nth-child(4) { -webkit-animation: crossfade 48s 12s infinite; animation: crossfade 48s 12s infinite; } .item:nth-child(5) { -webkit-animation: crossfade 48s 6s infinite; animation: crossfade 48s 6s infinite; } .item:nth-child(6) { -webkit-animation: crossfade 48s 0s infinite; animation: crossfade 48s 0s infinite; } @keyframes crossfade { 0% { opacity: 1; } 10.5% { opacity: 1; } 12.5% { opacity: 0; } 98% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div ID='slIDeshow'> <div class='item'> One </div> <div class='item'> Two </div> <div class='item'> Three </div> <div class='item'> Four </div> <div class='item'> Five </div> <div class='item'> Six </div> </div> </body></HTML> 问题是幻灯片永远不会开始.第n个子选择器正确应用于所有项目,但它们保持不透明度：0.
如何让幻灯片自动启动？
编辑：这似乎适用于firefox,但不适用于Chrome或Safari.
解决方法 将-webkit-前缀添加到关键帧中,就像这样@-webkit-keyframes { /* rest other code goes here */} 总结 以上是内存溢出为你收集整理的html – 纯文本CSS幻灯片全部内容，希望文章能够帮你解决html – 纯文本CSS幻灯片所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）