新增第86个小实例：滚动渐变导航栏
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
8155b021a4
commit
cbc8354861
|
|
@ -89,4 +89,5 @@
|
|||
82. HTML5+CSS3小实例：篮球弹跳动画
|
||||
83. HTML5+CSS3+JS小实例：马赛克背景的按钮特效
|
||||
84. HTML5+CSS3小实例：翻书动画
|
||||
85. HTML5+CSS3小实例：莫比乌斯环loading动画
|
||||
85. HTML5+CSS3小实例：莫比乌斯环loading动画
|
||||
86. HTML5+CSS3+JS小实例：滚动渐变导航栏
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/* 引入网络字体（Poppins） */
|
||||
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
body{
|
||||
/* 默认最小高度：2屏 */
|
||||
min-height: 200vh;
|
||||
background-color: #000;
|
||||
}
|
||||
header{
|
||||
/* 固定定位 */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
/* 弹性布局 */
|
||||
display: flex;
|
||||
/* 将元素靠边对齐 */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40px 100px;
|
||||
z-index: 1;
|
||||
/* 动画过渡 */
|
||||
transition: 0.6s;
|
||||
}
|
||||
header .logo{
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
/* 转大写 */
|
||||
text-transform: uppercase;
|
||||
/* 字间距 */
|
||||
letter-spacing: 2px;
|
||||
transition: 0.6s;
|
||||
}
|
||||
header ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
header ul li{
|
||||
list-style: none;
|
||||
}
|
||||
header ul li a{
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
transition: 0.6s;
|
||||
}
|
||||
.banner1{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url("../images/car1.jpg") no-repeat;
|
||||
/* 保持原有尺寸比例，裁切长边 */
|
||||
background-size: cover;
|
||||
/* 图片定位正中间 */
|
||||
background-position: center center;
|
||||
}
|
||||
.banner2{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url("../images/car2.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
/* 鼠标滚动后，改变导航栏样式 */
|
||||
header.sticky{
|
||||
padding: 6px 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
header.sticky .logo,
|
||||
header.sticky ul li a{
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>滚动渐变导航栏</title>
|
||||
<link rel="stylesheet" href="../css/86.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="#" class="logo">logo</a>
|
||||
<ul>
|
||||
<li><a href="#">探索车型</a></li>
|
||||
<li><a href="#">官方商城</a></li>
|
||||
<li><a href="#">车主服务</a></li>
|
||||
<li><a href="#">科技创新</a></li>
|
||||
<li><a href="#">奔驰天下</a></li>
|
||||
<li><a href="#">预约品鉴</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<section class="banner1"></section>
|
||||
<section class="banner2"></section>
|
||||
<script>
|
||||
// 鼠标滚轮滚动事件
|
||||
window.addEventListener("scroll",()=>{
|
||||
let header=document.querySelector("header");
|
||||
header.classList.toggle("sticky",window.scrollY>0);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
Loading…
Reference in New Issue