css3幻灯片效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta content="always" name="referrer"> <meta name="theme-color" content="#2932e1"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type="text/css" media="screen"> .al{ width: 120px; height: 120px; padding:50px; border-radius: 50%; background: #14295A; margin: 200px; } .logo{ width: 120px; height: 120px; background: #14295A; background-repeat: no-repeat; background-position: 50% 50%; animation: logo 6s linear infinite; } @-webkit-keyframes logo{0%,33.34%,66.67%{opacity: 0;}10%,33.33%,43.34%,66.66%,76.67%,100%{opacity: 1;}0%,33.34%,66.67%{-webkit-transform:translateY(-30px);}5%,33.33%,38.34%,66.66%,71.67%,100%{-webkit-transform:translateY(0);}0%,33.33%{background-image: url(images/1.png);}33.34%,66.66%{background-image: url(images/2.png);}66.67%,100%{background-image: url(images/3.png);}} </style> </head> <body> <div class="al"> <div class="logo"> </div> </div> </body> </html>