更新第63个小实例

2021-12-07 00:20:27 +08:00 · 2021-12-07 00:20:27 +08:00 · 54b8d3fb7a
parent a4551d7fcb
commit 54b8d3fb7a
3 changed files with 55 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -66,4 +66,5 @@
 59. HTML5+CSS3小实例之侧边导航栏
 60. HTML5+CSS3小实例之垂直卡片滑动动画
 61. HTML5+CSS3小实例之纯CSS实现轮播图效果
-62. HTML5+CSS3小实例之流星划过天际的动画效果
+62. HTML5+CSS3小实例之流星划过天际的动画效果
+63. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（竖屏）
--- a/css/63.css
+++ b/css/63.css
@ -0,0 +1,31 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+.container{
+    /* 100%窗口宽度和高度 */
+    width: 100vw;
+    height: 100vh;
+    /* 设置滚动贴合的方式：沿Y轴滚动 mandatory表示强制滚动 */
+    scroll-snap-type: y mandatory;
+    /* 需要把滚动条设置到直接父容器，scroll-snap-type才能生效 */
+    /* 溢出时，垂直保留滚动条，水平隐藏滚动条 */
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+.container div{
+    /* 100%窗口宽度和高度 */
+    width: 100vw;
+    height: 100vh;
+    /* 弹性布局 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 通过var函数调用自定义属性--c，设置各个div的背景颜色 */
+    background-color: var(--c);
+    font-size: 200px;
+    color: #fff;
+    /* 设置下一页的内容会滚动贴合到顶部 */
+    scroll-snap-align: start;
+}
--- a/html/63.html
+++ b/html/63.html
@ -0,0 +1,22 @@
+<!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>纯CSS实现全屏滚动贴合效果（竖屏）</title>
+    <link rel="stylesheet" href="../css/63.css">
+</head>
+
+<body>
+    <div class="container">
+        <!-- --c为自定义属性（颜色值），可通过var函数进行调用 -->
+        <div style="--c: lightcoral;">1</div>
+        <div style="--c: lightseagreen;">2</div>
+        <div style="--c: lightsalmon;">3</div>
+        <div style="--c: lightskyblue;">4</div>
+    </div>
+</body>
+
+</html>