我想让整套动画永远玩。当最后一张照片消失时,我想让第一张照片再次出现等等。我做的(和我不喜欢)设置页面重新加载在最后一张照片淡出结束。有没有任何其他方法来做到这一点使用css?
<html> <head> <style> .content{ height: 400px !important; /*margin: auto !important;*/ overflow: hidden !important; width: 780px !important; } .imgholder{ height: 400px; margin: auto; width: 780px; } .photo1{ opacity: 0; animation: fadeinphoto 7s 1; -moz-animation: fadeinphoto 7s 1; -webkit-animation: fadeinphoto 7s 1; -o-animation: fadeinphoto 7s 1; float: left; position: relative; top: 0px; z-index: 1; } .photo2 { opacity: 0; animation: fadeinphoto 7s 5s 1; -moz-animation: fadeinphoto 7s 5s 1; -webkit-animation: fadeinphoto 7s 5s 1; -o-animation: fadeinphoto 7s 5s 1; float: left; position: relative; top: -400px; z-index: 1; } .photo3 { opacity:0; animation: fadeinphoto 7s 10s 1; -moz-animation: fadeinphoto 7s 10s 1; -webkit-animation: fadeinphoto 7s 10s 1; -o-animation: fadeinphoto 7s 10s 1; float: left; position: relative; top: -800px; z-index: 1; } .photo4 { opacity: 0; animation: fadeinphoto 7s 15s 1; -moz-animation: fadeinphoto 7s 15s 1; -webkit-animation: fadeinphoto 7s 15s 1; -o-animation: fadeinphoto 7s 15s 1; float: left; position: relative; top: -1200px; z-index: 1; } .photo5 { opacity: 0; animation: fadeinphoto 7s 20s 1; -moz-animation: fadeinphoto 7s 20s 1; -webkit-animation: fadeinphoto 7s 20s 1; -o-animation: fadeinphoto 7s 20s 1; float: left; position: relative; top: -1600px; z-index: 1; } /* Animation Keyframes*/ @keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } A100% { opacity: 0; } } @-webkit-keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeinphoto { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } </style> <body> <div class="content"> <div class="imgholder"> <img src="images/image1.jpg" width="780" height="400" class="photo1"/> <img src="images/image2.JPG" width="780" height="400" class="photo2"/> <img src="images/image3.JPG" width="780" height="400" class="photo3"/> <img src="images/image4.jpg" width="780" height="400" class="photo4"/> <img src="images/image5.jpg" width="780" height="400" class="photo5"/> </div> </div> </body> </head> </html>
解决方法
原文地址:https://www.jb51.cc/css/220464.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。