css3动态背景图片代码实例
分类:实例代码
css3动态背景图片代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了动态背景图片效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .pic { width: 1600px; height: 500px; overflow: hidden; position: relative; } .pic .img { background: url(demo/CSS/img/dongtai.jpg) no-repeat center center; height: 100%; animation: mymove 10s infinite; -webkit-animation: mymove 10s infinite; } @keyframes mymove { 0% { background-position: center; } 25% { background-position: top; } 50% { background-position: center; } 75% { background-position: bottom; } 100% { background-position: center; } } .pic img { position: relative; animation: mymove2 10s infinite; -webkit-animation: mymove2 10s infinite; } @keyframes mymove2 { 0% { top: -200px; } 25% { top: 0; } 50% { top: -200px; } 75% { top: -400px; } 100% { top: -200px; } } </style> </head> <body> <div class="wrap"> <div class="pic"> <div class="img"></div> </div> </div> </body> </html>
css3动态背景图片代码实例,这样的场景在实际项目中还是用的比较多的,关于css3动态背景图片代码实例就介绍到这了。