更新第64个小实例

2021-12-07 17:59:13 +08:00 · 2021-12-07 17:59:13 +08:00 · 0a8ceeaa65
parent 54b8d3fb7a
commit 0a8ceeaa65
3 changed files with 59 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -67,4 +67,5 @@
 60. HTML5+CSS3小实例之垂直卡片滑动动画
 61. HTML5+CSS3小实例之纯CSS实现轮播图效果
 62. HTML5+CSS3小实例之流星划过天际的动画效果
-63. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（竖屏）
+63. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（竖屏）
+64. HTML5+CSS3小实例之纯CSS实现全屏滚动贴合效果（横屏）
--- a/css/64.css
+++ b/css/64.css
@ -0,0 +1,35 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+.container{
+    /* 100%窗口宽度和高度 */
+    width: 100vw;
+    height: 100vh;
+    /* 弹性布局 */
+    display: flex;
+    /* 设置滚动贴合的方式：沿X轴滚动 mandatory表示强制滚动 */
+    scroll-snap-type: x mandatory;
+    /* 需要把滚动条设置到直接父容器，scroll-snap-type才能生效 */
+    /* 溢出时，水平保留滚动条，垂直隐藏滚动条 */
+    overflow-x: scroll;
+    overflow-y: 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;
+    /* 在flex容器中，当空间不够时，元素会被挤压，flex-shrink为0可以防止元素被挤压 */
+    flex-shrink: 0;
+}
--- a/html/64.html
+++ b/html/64.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/64.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>