css动画

 1 布局方案
 2 1、版心布局
 3      <div class="top">top</div>
 4      <div class="banner">banner</div>
 5      <div class="main">main</div>
 6      <div class="footer">footer</div>
 7     </body>
 8 2、左右布局
 9     <header class="top">top</header>
10     <nav class="banner">banner</nav>
11     <article class="main">
12         <section class="left">left</section>
13         <section class="right">right</section>
14     </article>
15     <footer class="footer">footer</footer>

 1 div{
 2             width: 100px;
 3             height: 100px;
 4             background-color: purple;
 5             border-radius: 50%;
 6 
 7             /*animation: 动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
 8             animation: atob 2s ease 0s infinite alternate;
 9     }
10         
11/*定义动画*/
12@keyframes atob {
13     from{
14          transform: translateX(0);
15         }
16     to{
17         transform: translateX(500px);
18        }
19   }

 1 div {
 2             width: 100px;
 3             height: 100px;
 4             background-color: purple;
 5             border-radius: 50%;
 6 
 7             animation: loop 2s infinite alternate;
 8         }
 9 
10         @keyframes loop {
11             0% {
12                 transform: translate3d(0, 0, 0);
13             }
14             25% {
15                 transform: translate3d(600px, 0, 0);
16             }
17             50% {
18                 transform: translate3d(600px, 200px, 0);
19             }
20             75% {
21                 transform: translate3d(0, 200px, 0);
22             }
23             100% {
24                 transform: translate3d(0, 0, 0);
25             }
26         }

 1 img{
 2      animation: like 3s infinite;
 3    }
 4         
 5@keyframes like {
 6      0%{
 7          transform: translate3d(0, 0, 0);
 8         }
 9     50%{
10         transform: translate3d(800px, 0, 0);
11        }
12     51%{
13         transform: translate3d(800px, 0, 0) rotateY(180deg);
14        }
15     99%{
16        transform: translate3d(0, 0, 0) rotateY(180deg);
17        }
18     }

 1 ul{
 2             list-style: none;
 3         }
 4 
 5         nav{
 6             width: 900px;
 7             height: 100px;
 8             border: 1px solid orangered;
 9             margin: 100px auto;
10             /*超出隐藏*/
11             overflow: hidden;
12         }
13 
14         nav ul li{
15             float: left;
16             width: 100px;
17             height: 100px;
18         }
19 
20         nav ul li img{
21             width: 100%;
22             height: 100%;
23         }
24 
25         nav ul{
26             width: 200%;
27             animation: moving 5s linear infinite;
28         }
29 
30         /*自定义动画*/
31         @keyframes moving {
32             from{
33                 transform: translateX(0);
34             }
35             to{
36                 transform: translateX(-900px);
37             }
38         }
39 
40         nav:hover ul{
41             /*动画暂停*/
42             animation-play-state: paused;
43         }
44 
45 
46  <nav>
47        <ul>
48            <li><img src="img/f01.png" ></li>
49            <li><img src="img/f02.png" ></li>
50            <li><img src="img/f03.png" ></li>
51            <li><img src="img/f04.png" ></li>
52            <li><img src="img/f05.png" ></li>
53            <li><img src="img/f06.png" ></li>
54            <li><img src="img/f07.png" ></li>
55            <li><img src="img/f08.png" ></li>
56            <li><img src="img/f09.png" ></li>
57            <li><img src="img/f01.png" ></li>
58            <li><img src="img/f02.png" ></li>
59            <li><img src="img/f03.png" ></li>
60            <li><img src="img/f04.png" ></li>
61            <li><img src="img/f05.png" ></li>
62            <li><img src="img/f06.png" ></li>
63            <li><img src="img/f07.png" ></li>
64            <li><img src="img/f08.png" ></li>
65            <li><img src="img/f09.png" ></li>
66        </ul>
67    </nav>