lilongok 2015-04-16
<div class="container"> <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" /> </div> <style> body{background:#000;} .container{ margin:50px auto; width:500px; height:300px; overflow:hidden; border:10px solid; border-top-color:#856036; border-left-color:#5d4426; border-bottom-color:#856036; border-right-color:#5d4426; position:relative; } .photo{ position:absolute; animation:round 16s infinite; opacity:0; } @keyframes round{ 15%{opacity:1;} 25%{opacity:1;} 40%{opacity:0;} } .container:hover .photo{ animation-play-state:paused; } img:nth-child(1){animation-delay:0s;} img:nth-child(2){animation-delay:4s;} img:nth-child(3){animation-delay:8s;} img:nth-child(4){animation-delay:12s;} </style>