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>

来源：https://www.cnblogs.com/HiJackykun/p/11079894.html

标签

动画

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!