念念不忘
必有回响

B站网页特效学习 — 自适应布局导航

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

效果演示:demo

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>自适应布局导航栏</title>
		<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'montserrat', sans-serif;
				box-sizing: border-box;
			}
			.services-section {
				background: #333;
				background-size: cover;
				padding: 60px 0;
			}
			.inner-width {
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 20px;
				overflow: hidden;
			}
			.section-title {
				text-align: center;
				color: #ddd;
				text-transform: uppercase;
				font-size: 30px;
			}
			.border {
				width: 160px;
				height: 2px;
				background: #82ccdd;
				margin: 40px auto;
			}
			.services-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.service-box {
				max-width: 33.33%;
				padding: 10px;
				text-align: center;
				color: #ddd;
				cursor: pointer;
			}
			.service-icon {
				display: inline-block;
				width: 70px;
				height: 70px;
				border: 3px solid #82ccdd;
				color: #82ccdd;
				transform: rotate(45deg);
				margin-bottom: 30px;
				margin-top: 16px;
				transition: 0.3s linear;
			}
			.service-icon i {
				line-height: 70px;
				transform: rotate(-45deg);
				font-size: 26px;
			}
			.service-box:hover .service-icon {
				background: #82ccdd;
				color: #ddd;
			}
			.service-title {
				font-size: 18px;
				text-transform: uppercase;
				margin-bottom: 10px;
			}
			.service-desc {
				font-size: 14px;
			}
			@media screen and (max-width: 960px) {
				.service-box {
					max-width: 45%;
				}
			}
			@media screen and (max-width: 768px) {
				.service-box {
					max-width: 50%;
				}
			}
			@media screen and (max-width: 480px) {
				.service-box {
					max-width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="services-section">
			<div class="inner-width">
				<h1 class="section-title">Our Service</h1>
				<div class="border"></div>
				<div class="services-container">
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本功能都是类似的。所谓店铺装修,就是用户可以在
							PC端进行移动页辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-object-ungroup"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本功能都是拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							PC端进行移动页面的制作,只需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-database"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制。所谓店铺装修,就是用户可以在
							PC端进行移动页面的制作,只需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fab fa-android"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 自适应布局导航
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址