skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第196个小实例：纯CSS实现锚点平滑过渡

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-12-08 17:17:11 +08:00
parent d3f787264f
commit 5d27310bcb
3 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -203,6 +203,7 @@
193. HTML5+CSS3+JS小实例：可拖拽排序的人物列表
194. HTML5+CSS3+JS小实例：自适应瀑布流布局
195. HTML5+CSS3小实例：纯CSS实现网站置灰
196. HTML5+CSS3小实例：纯CSS实现锚点平滑过渡
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

43
code/196/196.css Normal file
View File

@ -0,0 +1,43 @@
*{
/* 初始化 */
margin: 0;
padding: 0;
/* 设置滚动时采用平滑过渡 */
scroll-behavior: smooth;
}
nav{
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 60px;
line-height: 60px;
position: fixed;
text-align: center;
}
nav a{
color: #fff;
font-size: 30px;
margin: 0 15px;
text-decoration: none;
}
nav a:hover{
text-decoration: underline;
}
.container div{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 150px;
}
.container div:nth-child(1){
background-color: #95e1d3;
}
.container div:nth-child(2){
background-color: #eaffd0;
}
.container div:nth-child(3){
background-color: #fce38a;
}
.container div:nth-child(4){
background-color: #f38181;
}

24
code/196/196.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>纯CSS实现锚点平滑过渡</title>
<link rel="stylesheet" href="196.css">
</head>
<body>
<nav>
<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>
<a href="#d">D</a>
</nav>
<div class="container">
<div class="item" id="a">A</div>
<div class="item" id="b">B</div>
<div class="item" id="c">C</div>
<div class="item" id="d">D</div>
</div>
</body>
</html>