css动画

布局方案
1、版心布局
     <div class="top">top</div>
     <div class="banner">banner</div>
     <div class="main">main</div>
     <div class="footer">footer</div>
    </body>
2、左右布局
    <header class="top">top</header>
    <nav class="banner">banner</nav>
    <article class="main">
        <section class="left">left</section>
        <section class="right">right</section>
    </article>
    <footer class="footer">footer</footer>

div{
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50%;

            /*animation: 动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
            animation: atob 2s ease 0s infinite alternate;
    }
        
/*定义动画*/
@keyframes atob {
    from{
         transform: translateX(0);
        }
    to{
        transform: translateX(500px);
       }
  }

div {
            width: 100px;
            height: 100px;
            background-color: purple;
            border-radius: 50%;

            animation: loop 2s infinite alternate;
        }

        @keyframes loop {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(600px, 0, 0);
            }
            50% {
                transform: translate3d(600px, 200px, 0);
            }
            75% {
                transform: translate3d(0, 200px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }

img{
     animation: like 3s infinite;
   }
        
@keyframes like {
     0%{
         transform: translate3d(0, 0, 0);
        }
    50%{
        transform: translate3d(800px, 0, 0);
       }
    51%{
        transform: translate3d(800px, 0, 0) rotateY(180deg);
       }
    99%{
       transform: translate3d(0, 0, 0) rotateY(180deg);
       }
    }

ul{
            list-style: none;
        }

        nav{
            width: 900px;
            height: 100px;
            border: 1px solid orangered;
            margin: 100px auto;
            /*超出隐藏*/
            overflow: hidden;
        }

        nav ul li{
            float: left;
            width: 100px;
            height: 100px;
        }

        nav ul li img{
            width: 100%;
            height: 100%;
        }

        nav ul{
            width: 200%;
            animation: moving 5s linear infinite;
        }

        /*自定义动画*/
        @keyframes moving {
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-900px);
            }
        }

        nav:hover ul{
            /*动画暂停*/
            animation-play-state: paused;
        }


 <nav>
       <ul>
           <li><img src="img/f01.png" alt=""></li>
           <li><img src="img/f02.png" alt=""></li>
           <li><img src="img/f03.png" alt=""></li>
           <li><img src="img/f04.png" alt=""></li>
           <li><img src="img/f05.png" alt=""></li>
           <li><img src="img/f06.png" alt=""></li>
           <li><img src="img/f07.png" alt=""></li>
           <li><img src="img/f08.png" alt=""></li>
           <li><img src="img/f09.png" alt=""></li>
           <li><img src="img/f01.png" alt=""></li>
           <li><img src="img/f02.png" alt=""></li>
           <li><img src="img/f03.png" alt=""></li>
           <li><img src="img/f04.png" alt=""></li>
           <li><img src="img/f05.png" alt=""></li>
           <li><img src="img/f06.png" alt=""></li>
           <li><img src="img/f07.png" alt=""></li>
           <li><img src="img/f08.png" alt=""></li>
           <li><img src="img/f09.png" alt=""></li>
       </ul>
   </nav>