css3动画
@keyframes 动画名 {
0%
{
}
100%
{
}
}
元素执行动画
animation: 动画名 运动时间 运动曲线
无缝滚动
见案例
02无缝滚动.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style: none; } img { display: block; } section { width: 378px; height: 86px; margin: 100px auto; overflow: hidden; } section ul { width: 1000%; animation: moving 5s linear infinite; } ul li { float: left; } /*定义动画*/ @keyframes moving { from { transform: translateX(0); } to { transform: translateX(-882px); } } section:hover ul { /* 鼠标放到section时候让ul的动画暂停*/ animation-play-state: paused; } </style> </head> <body> <section> <ul> <li><img src="nav1.jpg" alt=""></li> <li><img src="nav2.jpg" alt=""></li> <li><img src="nav3.jpg" alt=""></li> <li><img src="nav4.jpg" alt=""></li> <li><img src="nav5.jpg" alt=""></li> <li><img src="nav6.jpg" alt=""></li> <li><img src="nav7.jpg" alt=""></li> <li><img src="nav1.jpg" alt=""></li> <li><img src="nav2.jpg" alt=""></li> <li><img src="nav3.jpg" alt=""></li> </ul> </section> </body> </html>
