css动画

Posted 2022-02-27 zhangzhengyang

 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>