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" alt=""></li>
49 <li><img src="img/f02.png" alt=""></li>
50 <li><img src="img/f03.png" alt=""></li>
51 <li><img src="img/f04.png" alt=""></li>
52 <li><img src="img/f05.png" alt=""></li>
53 <li><img src="img/f06.png" alt=""></li>
54 <li><img src="img/f07.png" alt=""></li>
55 <li><img src="img/f08.png" alt=""></li>
56 <li><img src="img/f09.png" alt=""></li>
57 <li><img src="img/f01.png" alt=""></li>
58 <li><img src="img/f02.png" alt=""></li>
59 <li><img src="img/f03.png" alt=""></li>
60 <li><img src="img/f04.png" alt=""></li>
61 <li><img src="img/f05.png" alt=""></li>
62 <li><img src="img/f06.png" alt=""></li>
63 <li><img src="img/f07.png" alt=""></li>
64 <li><img src="img/f08.png" alt=""></li>
65 <li><img src="img/f09.png" alt=""></li>
66 </ul>
67 </nav>
