30个HTML+CSS前端开发案例（五）_html网页制作案例

作者：IT小白 | 2024-02-29 17:29:57

踩

html网页制作案例

30个HTML+CSS前端开发案例（21-25）

本人说明
全屏加载动画效果
- 代码实现
- 效果
吃豆豆动画效果
- 代码实现
- 效果
鼠标悬停3D翻转效果
- 代码实现
- 效果
3D旋转木马效果
- 代码实现
- 效果
flex弹性布局-酷狗音乐播放列表
- 代码实现
- 效果
资源包

本人说明

本专栏为记录博主的毕业设计而开创，感兴趣的码友可以持续关注本专栏，会定期更新相关内容，我的论文选题为——基于神经网络的智能学习系统，侧重于考研专业课的智能化学习，目前跟着B站上手一些前端实战项目，把之前忘掉的东西都捡起来。
本次的五个小案例，前四个侧重于动画特效的实现，大家在抖音上可能经常看到类似的效果图，今天我们就来学习一下这些特效是如何是实现的！

全屏加载动画效果

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全屏加载动画效果</title>
		<link rel="stylesheet" href="css/animate.min.css">
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			.container {
				width: 100%;
				/* 浏览器整个高度被分为100份,100vh即为整个页面高度 */
				height: 100vh;
				background-color: aqua;
				position: relative;
			}

			.box {
				width: 1080px;
				height: 540px;
				/* background-color: beige; */
				position: absolute;
				/* 设置水平居中效果 */
				left: 50%;
				margin-left: -540px;
				top: 50%;
				margin-top: -270px;
			}
			.box .item{
				float: left;
				margin: 10px;
				border-radius: 10px;
			}
			.item1{
				width: 250px;
				height: 520px;
				background-image: linear-gradient(to bottom,#fff,pink);
			}
			.item2,.item3{
				width: 380px;
				height: 250px;
				background-image: linear-gradient(to bottom,pink,#fff);
			}
			.item4,.item5,.item6{
				width: 250px;
				height: 250px;
				background-image: linear-gradient(to bottom,#fff,pink);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="item item1 animate__animated animate__backInDown">可是</div>
				<div class="item item2 animate__animated animate__backInLeft">遗憾的是。</div>
				<div class="item item3 animate__animated animate__backInRight">我们生活在</div>
				<div class="item item4 animate__animated animate__backInUp">两条平行直线</div>
				<div class="item item5 animate__animated animate__bounceIn">永远不会相交的</div>
				<div class="item item6 animate__animated animate__fadeInDown">世界里</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

效果

吃豆豆动画效果

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吃豆豆动画效果</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
			}

			.eat-peas {
				width: 600px;
				height: 200px;
				/* background-color: antiquewhite; */
				margin: 150px auto 0;
				position: relative;
			}

			.eat-peas .head {
				width: 200px;
				height: 200px;
				/* border: 2px solid blue; */
				border-radius: 50%;
				/* 隐藏多余盒子部分 */
				overflow: hidden;
				position: relative;
				z-index: 2;
			}

			/* 利用伪元素构造盒子 */
			.eat-peas .head::before {
				content: "";
				display: block;
				width: 200px;
				height: 100px;
				background-color: tomato;
				/* 以盒子底部中心为轴向上旋转盒子 */
				transform-origin: bottom center;
				transform: rotate(0deg);
				/* 引入动画 */
				animation: rotate1 .4s ease infinite alternate;
			}

			.eat-peas .head::after {
				content: "";
				display: block;
				width: 200px;
				height: 100px;
				background-color: tomato;
				/* 以盒子顶部中心为轴向下旋转盒子 */
				transform-origin: top center;
				transform: rotate(0deg);
				/* 引入动画 */
				animation: rotate2 .4s ease infinite alternate;

			}

			@keyframes rotate1 {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(-30deg);
				}
			}
			@keyframes rotate2 {
				0% {
					transform: rotate(0deg);
				}
				
				100% {
					transform: rotate(30deg);
				}
			}
			 /* 眼睛 */
			.eat-peas .eye{
				width: 20px;
				height: 20px;
				background-color: #000;
				border: 2px solid #fff;
				position: absolute;
				top: 20px;
				left: 80px;
				border-radius: 50%;
			}
			/* 豆豆 */
			.eat-peas .peas{
				width: 40px;
				height: 40px;
				background-color: tomato;
				border-radius: 50%;
				position: absolute;
				left: 120px;
				top: 50%;
				margin-top: -20px;
				box-shadow: 70px 0px 0px tomato,140px 0px 0px tomato,210px 0px 0px tomato,280px 0px 0px tomato,350px 0px 0px tomato;
				animation: move .8s ease infinite;
			}
			@keyframes move {
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-70px);
				}
			}
		</style>
	</head>
	<body>
		<div class="eat-peas">
			<div class="head">
				<div class="eye"></div>
			</div>
			<div class="peas"></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

效果

鼠标悬停3D翻转效果

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标悬停3D翻转效果</title>
		<style type="text/css">
			body,h3,p{
				margin: 0;
				padding: 0;
			}
			.scene{
				width: 400px;
				height: 400px;
				/* border: 2px solid red; */
				margin: 100px auto 0;
				/* 视距,决定了3D效果*/
				perspective: 800px;
			}
			.scene .box{
				width: 400px;
				height: 300px;
				/* background-color: yellow;*/
				/* 添加过渡动画 */
				transition: all ease 1s;
				position: relative;
				/* 令元素呈现3D效果 */
				transform-style: preserve-3d;
			}
			.scene .box:hover{
				transform: rotateY(-180deg);
			}
			.box .box-front{
				width: 400px;
				height: 300px;
				background-color: pink;
				position: absolute;
				left: 0;
				top: 0;
				/* 调高层级 */
				z-index: 2;
			}
			.box .box-mid{
				width: 400px;
				height: 300px;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				left: 0;
				top: 0;
				transform: translateZ(-1px);
			}
			.box .box-back{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				background-image: linear-gradient(to bottom right,pink,#fff,skyblue);
				position: absolute;
				left: 50%;
				margin-left: -100px;
				top: 50%;
				margin-top: -100px;
				transform: translateZ(-100px) rotateY(-180deg);
				font-size: 14px;
				line-height: 20px;
				box-sizing: border-box;
				border-radius: 10px;
			}
			.box .box-back h3{
				text-align: center;
				color: #000;
				font-weight: 400;
				font-size: 16px;
			}
			.box .box-back p{
				font-size: 13px;
				margin: 10px;
				font-weight: 200;
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="scene">
			<div class="box">
				<div class="box-front">
					<img src="images/3d01.jpg" alt="">
				</div>
				<div class="box-mid"></div>
				<div class="box-back">
					<h3>每日一言</h3>
					<p>遗憾的是我们生活在两条平行直线永远不会相交的世界里。</p>
				</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

效果

3D旋转木马效果

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D旋转木马效果</title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background-color: #000;
			}
			.scene{
				width: 600px;
				height: 300px;
				/* border: 2px solid red; */
				margin: 150px auto 0;
				/* 设置视距 */
				perspective: 800px;
			}
			.scene .box{
				width: 600px;
				height: 300px;
				/* background-color: yellow; */
				/* 设置动画 */
			    /* transition: all 1s ease; */
				position: relative;
				transform-style: preserve-3d;
				animation: rotate 5s ease infinite;
			}
			/* .scene:hover .box{
				transform: rotateY(-300deg);
			} */
			.scene .box .item{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -100px;
				/* transform: rotateY(calc(var(--i) * 40deg)) translateZ(300px); */
			}
			.box .item:nth-child(1){
				transform:  translateZ(300px);
			}
			.box .item:nth-child(2){
				transform: rotateY(40deg) translateZ(300px);
			}
			.box .item:nth-child(3){
				transform: rotateY(80deg) translateZ(300px);
			}
			.box .item:nth-child(4){
				transform: rotateY(120deg) translateZ(300px);
			}
			.box .item:nth-child(5){
				transform: rotateY(160deg) translateZ(300px);
			}
			.box .item:nth-child(6){
				transform: rotateY(200deg) translateZ(300px);
			}
			.box .item:nth-child(7){
				transform: rotateY(240deg) translateZ(300px);
			}
			.box .item:nth-child(8){
				transform: rotateY(280deg) translateZ(300px);
			}
			.box .item:nth-child(9){
				transform: rotateY(320deg) translateZ(300px);
			}
			.box:hover{
				animation-play-state: paused;
			}
			@keyframes rotate {
				0%{
					transform: rotateX(-10deg) rotateY(0deg);
				}
				100%{
					transform: rotateX(-10deg) rotateY(-360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="scene">
			<div class="box">
				<div class="item --i:0">
					<img src="images/gg1.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:1">
					<img src="images/gg2.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:2">
					<img src="images/gg3.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:3">
					<img src="images/gg4.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:4">
					<img src="images/gg4.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:5">
					<img src="images/gg1.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:6">
					<img src="images/gg1.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:7">
					<img src="images/gg1.jpg" alt="" width="200" height="200">
				</div>
				<div class="item --i:8">
					<img src="images/gg1.jpg" alt="" width="200" height="200">
				</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

效果

flex弹性布局-酷狗音乐播放列表

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex弹性布局-酷狗音乐播放列表</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			.container {
				width: 100%;
				/* height: 600px; */
				/* background-color: antiquewhite; */
				/* 设置最小宽度,防止缩至过少造成挤压 */
				min-width: 680px;
				margin-top: 100px;
				/* 弹性布局 */
				display: flex;
				flex-wrap: wrap;
			}
			.container .item {
				width: 25%;
				display: flex;
				/* 调成内容居中显示 */
				justify-content: center;
				margin-bottom: 20px;
			}

			.container .item .item-con {
				width: 150px;
				/* border: 1px solid red; */
				/* 弹性布局方向设置为纵向 */
				display: flex;
				flex-direction: column;
			}

			.item-con a.item-con-img {
				height: 150px;
				/* background-color: antiquewhite; */
				position: relative;
			}

			.item-con a.item-con-img img {
				border-radius: 10px;
			}
			/* 下方文字 */
			.item a.item-con-img span {
				font-size: 14px;
				color: #fff;
				/* background-color: red; */
				display: flex;
				position: absolute;
				bottom: 10px;
				left: 10px;
				z-index: 2;
			}

			.item-con a.item-con-img span img {
				margin-right: 5px;
			}
			/* 图片半下方遮罩层 */
			.item-con a.item-con-img::after{
				content: '';
				width: 100%;
				height: 50%;
				/* 使用渐变色 */
				background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.5));
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 0px 0px 10px 10px;
			}
			.item-con a.item-con-title{
				font-size: 14px;
				color: #333;
				margin-top: 10px;
			}
			.item-con a.item-con-title:hover{
				color: tomato;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-01.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-02.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-03.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-04.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-05.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-06.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-07.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="images/flex-08.jpg" alt="">
						<span>
							<img src="images/icon_play.png" alt="" width="14">
							2444.0万
						</span>
					</a>
					<a href="" class="item-con-title">
						催眠：Delta脑波音乐减压深度睡眠
					</a>
				</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

效果

资源包

相关代码及其图片素材，持续更新中。。。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/167159