|   字数统计: 2,354(字)

CSS3实现网页平滑过渡效果

发表于 | 分类于 | 阅读次数

CSS3实现网页平滑过渡效果

效果
效果

代码部分：

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现的页面平滑过渡 | 镜心书社</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
	<link rel="stylesheet" type="text/css" href="style/smooth-transition.css">
</head>
<body>
	<div class="container">
		<div class="st-container">
		<!-- nav begin -->
			<input type="radio" name="radio-set" checked="checked" id="st-control-1">
			<a href="#st-panel-1" title="">Serendipity</a>
			<input type="radio" name="radio-set" id="st-control-2">
			<a href="#st-panel-2" title="">Happinese</a>
			<input type="radio" name="radio-set" id="st-control-3">
			<a href="#st-panel-3" title="">Tranquillity</a>
			<input type="radio" name="radio-set" id="st-control-4">
			<a href="#st-panel-4" title="">Positivity</a>
			<input type="radio" name="radio-set" id="st-control-5">
			<a href="#st-panel-5" title="">Passion</a>
		<!-- nav end content begin-->
			<div class="st-scroll">
				<section class="st-panel" id="st-panel-1">
					<div class="st-description" data-icon="H"></div>
					<h2>Serendipity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel st-color" id="st-panel-2">
					<div class="st-description" data-icon="Q"></div>
					<h2>Happinese</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel" id="st-panel-3">
					<div class="st-description" data-icon="B"></div>
					<h2>Tranquillity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel st-color" id="st-panel-4">
					<div class="st-description" data-icon="U"></div>
					<h2>Positivity</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				<section class="st-panel " id="st-panel-5">
					<div class="st-description" data-icon="L"></div>
					<h2>Passion</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					</p>
				</section>
				
			</div>
		</div>
	</div>
</body>
</html>
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
@font-face{
	font-family: "Raphaelicons";
	src: url('./fonts/raphaelicons-webfont.eot')format('eot'),
		url('./fonts/raphaelicons-webfont.woff')format('woff'),
		url('./fonts/raphaelicons-webfont.ttf')format('truetype'),
		url('./fonts/raphaelicons-webfont.svg')format('svg');
	font-weight: normal;
	font-style: normal;
}
body{
	font-family: Georgia,serif;
	background: #ddd;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	overflow: hidden;
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: inherit | grayscale;
}
a{
	text-decoration: none;
	color: #555;
}
.clear{height: 0;
		height: 0;
		overflow: hidden;
		clear: both;
		padding: 0;
		margin: 0;
	}
.st-container{
	width: 100%;
	height: 100%;
	position: absolute;;
	left: 0;
	top: 0;
	font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
}
.st-container > input,
.st-container > a{
	width: 20%;
	height: 34px;
	line-height: 34px;
	position: fixed;
	bottom: 0;
	cursor: pointer;
}
.st-container > input{
	opacity: 0;
	z-index: 1000;
}
.st-container > a{
	z-index: 10;
	font-weight: 700;
	font-size: 16px;
	background: #e23a6e;
	text-align: center;
	color: #fff;
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
#st-control-1,#st-control-1 + a{
	left: 0;
}
#st-control-2,#st-control-2 + a{
	left: 20%;
}
#st-control-3,#st-control-3 + a{
	left: 40%;
}
#st-control-4,#st-control-4 + a{
	left: 60%;
}
#st-control-5,#st-control-5 + a{
	left: 80%;
}
.st-container input:checked + a,
.st-container input:checked:hover + a{
	background: #821134;
}
.st-container input:checked + a:after{
	content:'';
	width: 0;
	height: 0;
	overflow: hidden;
	border: 20px solid transparent;
	border-bottom-color:#821134; 
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -20px;
}
.st-container input:hover + a{
	background: #ad244f;
}
.st-scroll,
.st-panel{
	width: 100%;
	height: 100%;
	position: relative;
}
.st-scroll{
	left: 0;
	top: 0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	-moz-transition: all 0.6s ease-in-out;
	-webkit-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}
.st-panel{
	background-color: #fff;
	overflow:hidden;
}
#st-control-1:checked ~ .st-scroll{
	-webkit-transform: translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
	-webkit-transform: translateY(-100%);
	-moz-transform:translateY(-100%);
	-o-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
	-webkit-transform: translateY(-200%);
	-moz-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
	-webkit-transform: translateY(-300%);
	-moz-transform:translateY(-300%);
	-o-transform:translateY(-300%);
	-ms-transform:translateY(-300%);
	transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
	-webkit-transform: translateY(-400%);
	-moz-transform:translateY(-400%);
	-o-transform:translateY(-400%);
	-ms-transform:translateY(-400%);
	transform:translateY(-400%);
}
.st-description{
	width: 200px;
	height: 200px;
	background: #fa96b5;
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -100px;
	-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after{
	content: attr(data-icon);
	width: 200px;
	height: 200px;
	
	color: #fff;
	font-size: 90px;
	text-align: center;
	line-height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -100px 0 0 -100px;
	-webkit-transform: rotate(-45deg) translateY(25%);
	-moz-transform: rotate(-45deg) translateY(25%);
	-o-transform: rotate(-45deg) translateY(25%);
	-ms-transform: rotate(-45deg) translateY(25%);
	transform: rotate(-45deg) translateY(25%);
	font-family: "Raphaelicons";
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
}
.st-panel h2{
	color: #e23a6e;
	font-size:54px;
	line-height: 50px;
	text-align: center;
	font-weight: 900;
	width: 80%;
	position: absolute;
	left: 10%;
	top: 50%;
	margin-top: -70px;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	-webkit-backface-visibility:hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
	-webkit-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-moz-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-o-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	-ms-animation: moveDown 0.8s ease-in-out 0.2s backwards;
	animation: moveDown 0.8s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
	0%{
		-webkit-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-webkit-transform: translateY(0px);
		opacity: 1;
	}	
}
@-moz-keyframes moveDown{
	0%{
		-moz-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-moz-transform: translateY(0px);
		opacity: 1;
	}	
}
@-o-keyframes moveDown{
	0%{
		-o-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-o-transform: translateY(0px);
		opacity: 1;
	}	
}
@-ms-keyframes moveDown{
	0%{
		-ms-transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		-ms-transform: translateY(0px);
		opacity: 1;
	}	
}
@keyframes moveDown{
	0%{
		transform: translateY(-60px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}	
}
.st-panel p{
	position: absolute;
	width:60%;
	left: 50%;
	top: 50%;
	margin-left: -30%;
	font-size: 2em;
	text-align: center;
	line-height: 22px;
	padding: 0;
	-webkit-backface-visibility:hidden;
	color: #8b8b8b;
	margin-top: 20px;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 P,
#st-control-2:checked ~ .st-scroll #st-panel-2 P,
#st-control-3:checked ~ .st-scroll #st-panel-3 P,
#st-control-4:checked ~ .st-scroll #st-panel-4 P,
#st-control-5:checked ~ .st-scroll #st-panel-5 P{
	-webkit-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-moz-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-o-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	-ms-animation: moveUp 0.8s ease-in-out 0.2s backwards;
	animation: moveUp 0.8s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
	0%{
		-webkit-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-webkit-transform: translateY(0px);
		opacity: 1;
	}	
}
@-moz-keyframes moveUp{
	0%{
		-moz-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-moz-transform: translateY(0px);
		opacity: 1;
	}	
}
@-o-keyframes moveUp{
	0%{
		-o-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-o-transform: translateY(0px);
		opacity: 1;
	}	
}
@-ms-keyframes moveUp{
	0%{
		-ms-transform: translateY(40px);
		opacity: 0;
	}
	100%{
		-ms-transform: translateY(0px);
		opacity: 1;
	}	
}
@keyframes moveUp{
	0%{
		transform: translateY(40px);
		opacity: 0;
	}
	100%{
		transform: translateY(0px);
		opacity: 1;
	}	
}
.st-color{
	background: #fa96b5;
}
.st-color .st-description{
	background: #fff;
}
.st-color [data-icon]:after{
	color: #fa96b5;
}
.st-color h2{
	color: #fff;
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
}
.st-color p{
	color: rgba(255, 255, 255, 0.8);
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:520px) {
	.st-panel h2{
		font-size: 42px;
	}
	.st-panel p{
		width: 80%;
		left: 10%;
		margin-top:0; 
		margin-left: 0;
	}
	.st-container>a{
		font-size: 13px;
	}
}
@media screen and (max-width:360px) {
	.st-panel h2{
		font-size: 42px;
	}
	.st-panel p{
		width: 80%;
		left: 10%;
		margin-top:0; 
	}
	.st-container>a{
		font-size: 10px;
	}
	.st-description{
		width: 120px;
		height: 120px;
		margin-left:-60px; 
	}
	[data-icon]:after{
		font-size: 60px;
		-webkit-transform: rotate(-45deg) translateY(15%);
		-moz-transform: rotate(-45deg) translateY(15%);
		-o-transform: rotate(-45deg) translateY(15%);
		-ms-transform: rotate(-45deg) translateY(15%);
		transform: rotate(-45deg) translateY(15%);
		
	}
}

技术点

  • 通过input 的checked单选按钮实现是否被选中
  • translate3d（可以开启GPU硬件加速）
  • CSS3画三角形
  • backface-visibility
  • transition
  • @font-face实现小icon（不用切图，减少http请求）
  • animation
  • @keyframes
  • 自适应（响应式 用媒体查询实现）
  • @media query

-webkit-font-smoothing 字体平滑处理和抗锯齿渲染
CSS3里面加入了一个“-webkit-font-smoothing”属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

它有三个属性：

  • none —— 对低像素的文本比较好

  • subpixel-antialiased ——默认值

  • antialiased ——抗锯齿很好

例子： 

1
2
3
4
5
body{ 
-webkit-font-smoothing: antialiased; 
}

国外某网站例子

附：

1
-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用，特别是图标文字流行的今天。

隐藏元素的四种方法

dispaly:none;
//隐藏不占位

1
2
position:absolute;
    left:-99999px
1
2
visibility:hidden;
//隐藏占位
1
opacoty:0;

PS:这个demo里导航的移动原理是css的transitionY，而非一般导航里的通过标签a去链接；

而position：fixde这个定位机制让a标签本身的链接作用作废了（大家可以试试，反正一旦给链接设置成fixed链接作用就失效），链接作用作废的话a的visited状态就失效了，所以这里才选择了input去表达状态的选中与否（因为不同于hover状态是所有盒子都具备的，visited（or checked）状态只有a标签和input的radio type有）；

以上，详细解释了为什么用input，最后强调一下，这里的a标签只起到一个语义化的作用。

css3生成三角形看我的这篇博文 点这里

Browser and device support

  • Internet Explorer 8 and @font-face

    • IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

  • IE Compatibility modes

    • CSS3 is not supported in the old Internet Explorer compatibility modes. To be sure you’re using the latest rendering mode for IE, consider including the appropriate tag in your pages:
1
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirm the document mode by opening the debugging tools: press F12 and check the “Document Mode”.

This tag is included in all of Bootstrap’s documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

See this StackOverflow question for more information.

1
提一句：标题和正文的动画可以用`animate.css`实现。我们这里是为了学习css3就不多做解释了，感性兴趣的可以了解下。

参考

慕课网 css3实现网页平滑过渡效果
Browser and device support
http://www.dafont.com/
http://www.google.com/webfonts
@font-face
CSS-Only Responsive Layout with Smooth Transitions

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！