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>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11108471.html
