Skip to content

Commit d98ac63

Browse files
author
liujintong
committed
ch15 and ch16
1 parent 9304779 commit d98ac63

32 files changed

+2091
-0
lines changed

‎ch15/15-1 创建一个简单卡片.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
html {
10+
box-sizing: border-box;
11+
}
12+
13+
*,
14+
::before,
15+
::after {
16+
box-sizing: inherit;
17+
}
18+
19+
body {
20+
background-color: hsl(210, 80%, 20%);
21+
font-family: Helvetica, Arial, sans-serif;
22+
}
23+
24+
img {
25+
max-width: 100%;
26+
}
27+
28+
.card {
29+
padding: 0.5em;
30+
margin: 0 auto;
31+
background-color: white;
32+
max-width: 300px;
33+
/* 向右倾斜15度 */
34+
transform: rotate(15deg);
35+
/* 向左倾斜15度 */
36+
transform: rotate(-15deg);
37+
/* 卡片向左倾斜 20 度 */
38+
transform: skew(20deg);
39+
/* 卡片缩小0.5倍 */
40+
transform: scale(0.5);
41+
/* 卡片放大2倍 */
42+
transform: scale(1.5);
43+
/* 元素向右移动20px、向下移动40px */
44+
transform: translate(20px, 40px);
45+
}
46+
</style>
47+
</head>
48+
49+
<body>
50+
<div class="card">
51+
<img src="images/chicken1.jpg" alt="a chicken">
52+
<h4>Mrs. Featherstone</h4>
53+
<p>She may be a bit frumpy, but Mrs Featherstone gets the job done. She lays her largish cream-colored eggs on a
54+
daily basis. She is gregarious to a fault.</p>
55+
<p>This Austra White is our most prolific producer.</p>
56+
</div>
57+
</body>
58+
59+
</html>

‎ch15/15-10 菜单项添加交错的过渡延迟.html

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway">
9+
<style>
10+
html {
11+
box-sizing: border-box;
12+
}
13+
14+
*,
15+
*::before,
16+
*::after {
17+
box-sizing: inherit;
18+
}
19+
20+
body {
21+
background-color: hsl(200, 80%, 30%);
22+
background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
23+
color: white;
24+
font-family: Raleway, Helvetica, Arial, sans-serif;
25+
line-height: 1.4;
26+
margin: 0;
27+
min-height: 100vh;
28+
}
29+
30+
h1,
31+
h2,
32+
h3 {
33+
font-family: Alfa Slab One, serif;
34+
font-weight: 400;
35+
}
36+
37+
main {
38+
display: block;
39+
}
40+
41+
img {
42+
max-width: 100%;
43+
}
44+
45+
.page-header {
46+
margin: 0;
47+
padding: 1rem;
48+
}
49+
50+
@media (min-width: 30em) {
51+
.page-header {
52+
padding: 2rem 2rem 3rem;
53+
}
54+
}
55+
56+
@media (min-width:30em) {
57+
.main-nav {
58+
position: fixed;
59+
top: 8.25rem;
60+
left: 0;
61+
z-index: 10;
62+
background-color: transparent;
63+
transition: backgroundcolor 0.5s linear;
64+
border-top-right-radius: 0.5em;
65+
border-bottom-right-radius: 0.5em;
66+
}
67+
68+
.main-nav:hover {
69+
background-color: rgba(0, 0, 0, 0.6);
70+
}
71+
}
72+
73+
.nav-links {
74+
display: flex;
75+
justify-content: space-between;
76+
margin-top: 0;
77+
margin-bottom: 1rem;
78+
padding: 0 1rem;
79+
list-style: none;
80+
}
81+
82+
.nav-links>li+li {
83+
margin-left: 0.8em;
84+
}
85+
86+
.nav-links>li>a {
87+
display: block;
88+
padding: 0.8em 0;
89+
color: white;
90+
font-size: 0.8rem;
91+
text-decoration: none;
92+
text-transform: uppercase;
93+
letter-spacing: 0.06em;
94+
}
95+
96+
.nav-links__icon {
97+
height: 1.5em;
98+
width: 1.5em;
99+
vertical-align: -0.2em;
100+
}
101+
102+
.nav-links>li>a:hover {
103+
color: hsl(40, 100%, 70%);
104+
}
105+
106+
107+
@media (min-width:30em) {
108+
.nav-links {
109+
display: block;
110+
padding: 1em;
111+
margin-bottom: 0;
112+
}
113+
114+
.nav-links>li+li {
115+
margin-left: 0;
116+
}
117+
118+
.nav-links__label {
119+
display: inline-block;
120+
margin-left: 1em;
121+
padding-right: 1em;
122+
opacity: 0;
123+
transform: translate(-1em);
124+
transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3),
125+
opacity 0.4s linear;
126+
}
127+
128+
.nav-links:hover .nav-links__label,
129+
.nav-links a:focus>.nav-links__label {
130+
opacity: 1;
131+
transform: translate(0);
132+
}
133+
134+
.nav-links>li:nth-child(2) .nav-links__label {
135+
transition-delay: 0.1s;
136+
}
137+
138+
.nav-links>li:nth-child(3) .nav-links__label {
139+
transition-delay: 0.2s;
140+
}
141+
142+
.nav-links>li:nth-child(4) .nav-links__label {
143+
transition-delay: 0.3s;
144+
}
145+
146+
.nav-links>li:nth-child(5) .nav-links__label {
147+
transition-delay: 0.4s;
148+
}
149+
150+
.nav-links__icon {
151+
transition: transform 0.2s ease-out;
152+
}
153+
154+
.nav-links a:hover>.nav-links__icon,
155+
.nav-links a:focus>.nav-links__icon {
156+
transform: scale(1.3);
157+
}
158+
159+
}
160+
</style>
161+
</head>
162+
163+
<body>
164+
<header>
165+
<h1 class="page-header">The Yolk Factory</h1>
166+
</header>
167+
<nav class="main-nav">
168+
<ul class="nav-links">
169+
<li>
170+
<a href="/">
171+
<img src="images/home.svg" class="nav-links__icon" />
172+
<span class="nav-links__label">Home</span>
173+
</a>
174+
</li>
175+
<li>
176+
<a href="/events">
177+
<img src="images/calendar.svg" class="nav-links__icon" />
178+
<span class="nav-links__label">Events</span>
179+
</a>
180+
</li>
181+
<li>
182+
<a href="/members">
183+
<img src="images/members.svg" class="nav-links__icon" />
184+
<span class="nav-links__label">Members</span>
185+
</a>
186+
</li>
187+
<li>
188+
<a href="/about">
189+
<img src="images/star.svg" class="nav-links__icon" />
190+
<span class="nav-links__label">About</span>
191+
</a>
192+
</li>
193+
</ul>
194+
</nav>
195+
</body>
196+
197+
</html>

‎ch15/15-12 为盒子添加 3D 变换.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.row {
10+
display: flex;
11+
justify-content: center;
12+
}
13+
.box {
14+
box-sizing: border-box;
15+
width: 150px;
16+
margin: 0 2em;
17+
padding: 60px 0;
18+
text-align: center;
19+
background-color: hsl(150, 50%, 40%);
20+
transform: perspective(200px) rotateX(30deg);
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div class="row">
27+
<div class="box">One</div>
28+
<div class="box">Two</div>
29+
<div class="box">Three</div>
30+
<div class="box">Four</div>
31+
</div>
32+
</body>
33+
34+
</html>

‎ch15/15-13 建立统一的透视距离.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.row {
10+
display: flex;
11+
justify-content: center;
12+
perspective: 200px;
13+
}
14+
15+
.box {
16+
box-sizing: border-box;
17+
width: 150px;
18+
margin: 0 2em;
19+
padding: 60px 0;
20+
text-align: center;
21+
background-color: hsl(150, 50%, 40%);
22+
transform: rotateX(30deg);
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div class="row">
29+
<div class="box">One</div>
30+
<div class="box">Two</div>
31+
<div class="box">Three</div>
32+
<div class="box">Four</div>
33+
</div>
34+
</body>
35+
36+
</html>

‎ch15/15-14 使用 perspective-origin 移动镜头的位置.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<style type="text/css">
6+
.row {
7+
display: flex;
8+
justify-content: center;
9+
perspective: 200px;
10+
perspective-origin: left bottom;
11+
}
12+
13+
.box {
14+
box-sizing: border-box;
15+
width: 150px;
16+
margin: 0 2em;
17+
padding: 60px 0;
18+
text-align: center;
19+
background-color: hsl(150, 50%, 40%);
20+
transform: rotateX(30deg);
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<div class="row">
28+
<div class="box">One</div>
29+
<div class="box">Two</div>
30+
<div class="box">Three</div>
31+
<div class="box">Four</div>
32+
</div>
33+
</body>
34+
35+
</html>

0 commit comments

Comments
 (0)