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

1
2
<!— 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>

效果图：

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

夜河资源网提供的所有内容仅供学习与交流。通过使用本站内容随之而来的风险以及法律责任与本站无关，所承担的法律责任由使用者承担。
一、如果您发现本站侵害了相关版权，请附上本站侵权链接和您的版权证明一并发送至邮箱：yehes#qq.com（#替换为@）我们将会在五天内处理并断开该文章下载地址。
二、本站所有资源来自互联网整理收集，全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。
三、根据署名-非商业性使用-相同方式共享 (by-nc-sa) 许可协议规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。
四、基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。
五、根据二〇〇二年一月一日《计算机软件保护条例》规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可不经软件著作权人许可，无需向其支付报酬！
六、鉴此，也望大家按此说明转载和分享资源！本站提供的所有信息、教程、软件版权归原公司所有，仅供日常使用，不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！