CSS 实现拉开帷幕 效果
前言
拉开帷幕效果，即当滚动到元素上时，背景和文本都会改变颜色。页面背景从暗到亮，上面的内容也从亮到暗，同时处于吸附（sticky）定位。
一、前期基础准备
1.1 HTML 开始
为了模拟真实情况，我们用几个元素先把基本的htmL结构定义一下，首选需要一个容器放我们的帷幕 ，我们给他定义一个class curtain；在内部有一个 .invert子元素，它将是作为我们的吸附（sticky）定位框，最后空间内部的内容文本展示区 h2
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="title">网站标题</div>
<div class="curtain">
<div class="invert">
<h2>用CSS 写一个‘拉起帷幕’ 效果</h2>
</div>
</div>
</body>
</html>
1.2 设置 CSS 变量
创建CSS变量的原因是，这可以很容易地将它们写入样式中，并在以后可以根据需要随时修改他们
:root {
--minh: 100vh;
--color1: wheat;
--color2: midnightblue;
}
二、开始编写 拉开帷幕效果
2.1 设置.curtain的样式
接下来我们给 .curtain节点，添加背景颜色，然后使用::after伪元素将额外的空间添加到底部。这样，我们的吸附的内容，实际上会在滚动经过::after元素时粘在容器上。这样就可以产生一个视觉效果（错觉）。
.curtain {
background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
}
.curtain::after {
content: "";
display: block;
min-height: var(--minh);
}
知识点 CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片，我们这里创建上下两个不同颜色的背景图颜色。
2.2 设置.invert的样式
position: sticky并设置吸附顶部的位置。mix-blend-mode: difference<h2>将元素内部内容的颜色混合到.curtain的背景渐变中。display: flex将演示内容居中。min-height定义容器的高度并允许底部的额外空间。colorh2设置标题的颜色
.invert {
position: sticky;
top: 0px;
mix-blend-mode: difference;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--minh);
}
h2 {
color: var(--color1);
}
这里重点提一下 mix-blend-mode 属性difference我们的内容与背景融合在一起。该difference值很复杂，通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。
为了使混合工作，我们需要设置标题的颜色。在这种情况下，我们将浅色值分配给--color1变量，这样就可以实现像文章开头的效果了（录屏不够丝滑，现实中会好一些）
三、 一些问题的思考
如果吸附的内容不是纯文本，是图片的话，有写图片反转颜色会看起来不友好。这个方案主要用了两个大家平时可能比较少用的CSS linear-gradient() 函数 和 mix-blend-mode 属性，对应的自然就有浏览器支持情况，您要是感兴趣也可以深挖其更有趣的内容和应用。这个简单的方式不用JS 实现这个‘拉开帷幕’ 效果，在浏览器上变现还是挺流畅的，具体实用性的话，可能需要根据自身的需求来进行改造。
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanekfb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
