hooyantsing's Blog

P160_9_移动端多视图切换呈现

字数统计: 376阅读时长: 2 min
2020/04/21

P160 9 移动端多视图切换呈现

实战案例

介绍:

1、使用弹性盒子布局。

2、动画效果。

效果:

2a329b335dabf0a441e2fea8d61547bb.png

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
        }

        body::after {
            content: 'houdunren';
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            font-size: 3em;
            opacity: .5;
        }

        main {
            flex: 1;
            position: relative;
        }

        nav {
            height: 8vh;
            background: #34495e;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        nav a {
            font-size: 2em;
            color: white;
            text-decoration: none;
            flex: 1;
            text-align: center;
            text-transform: uppercase;
            opacity: .8;
            cursor: pointer;
        }

        nav a:nth-child(2) {
            border-right: solid 1px silver;
            border-left: solid 1px silver;
        }

        main > div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: translateY(-100%);
            transition: 1s;
            z-index: 1;
        }

        main > div:target {
            transform: translateX(0);
        }

        main > div:nth-child(1):target {
            background: #27ae60;
        }

        main > div:nth-child(2):target {
            background: #e67e22;
        }

        main > div:nth-child(3):target {
            background: #2980b9;
        }

        i {
            font-size: 8em;
            color: white;
        }
    </style>
</head>
<body>
<main>
    <div id="home">
        <i>HOME</i>
    </div>
    <div id="video">
        <i>VIDEO</i>
    </div>
    <div id="live">
        <i>LIVE</i>
    </div>
</main>
<nav>
    <a href="#home">home</a>
    <a href="#video">video</a>
    <a href="#live">live</a>
</nav>
</body>
</html>
CATALOG