02-CSS基础与进阶-day13_2018-09-21-20-17-52

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>