期望效果
代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 切换视口 -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- 引入 -->
<link rel="stylesheet" href="./favicon.ico">
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="./css/ydn-index.css">
<title>Alloy Team</title>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default header_nav navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Tweb Conf</a></li>
<li><a href="#">SuperStar</a></li>
<li><a href="#">Web前端</a></li>
<li><a href="#">关于</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./uploads/banner_1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./uploads/banner_4.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 开源 -->
<h2 class="text-center">
OpenSource/开源项目
</h2>
<p class="text-center">
种类众多的开源项目，让你爱不释手
</p>
<!-- 栅格系统 -->
<div class="container sg">
<div class="row">
<div class="col-sm-6 col-md-3 mask">
<img src="./uploads/pro1.jpg" alt="">
</div>
<div class="col-sm-6 col-md-3 mask">
<img src="./uploads/pro1.jpg" alt="">
</div>
<div class="col-sm-6 col-md-3 mask">
<img src="./uploads/pro1.jpg" alt="">
</div>
<div class="col-sm-6 col-md-3 mask">
<img src="./uploads/pro1.jpg" alt="">
</div>
</div>
</div>
<script src="./lib/js/jquery.js"></script>
<script src="./lib/bootstrap/js/bootstrap.js"></script>
</body>
</html>
##less
// out:../css/
body {
height: 3000px;
}
// 导航栏高度
.header_nav {
height: 70px;
background-color: transparent;
margin-bottom: 0;
border-bottom: 0;
}
//下拉栏背景
@media (max-width:992px) {
.navbar-collapse {
background-color: #26282c;
color: #9c9ead;
font-size: 19px;
text-align: center;
border: none;
}
}
// 轮播图高度
.carousel-inner {
.item {
img {
height: 400px;
object-fit: cover;
}
}
}
@media (max-width:767px) {
.carousel-inner {
.item {
img {
height: 250px;
}
}
}
}
@media (min-width:992px) {
.carousel-inner {
.item {
img {
height: 500px;
}
}
}
}
//去掉轮播图左右两侧阴影
.carousel-control.right,
.carousel-control.left{
background-image: none;
}
// 轮播图圆点
.carousel-indicators .active {
width: 40px;
}
.carousel-indicators li {
width: 40px;
}
// 栅格系统
.sg {
.mask {
position: relative;
margin-bottom: 10px;
overflow: hidden;
top: 0;
transition: 1s;
//伪元素添加擦亮效果
&::before{
position: absolute;
top: 0;
left: -120%;
content: "";
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent, rgba(255, 255, 255, 0.582),transparent);
border-radius: 10px;
transform: skewX(-30deg);
//悬停擦亮
}
&:hover::before{
left: 120%;
transition: 1s;
}
//悬停上浮
&:hover{
top: -5px;
box-shadow:0px 25px 20px -28px black;
}
}
img {
width: 100%;
border-radius: 10px;
}
}
