前端效果之“拉开窗帘”

最新推荐文章于 2024-09-13 09:31:08 发布

寒冰1307

最新推荐文章于 2024-09-13 09:31:08 发布

阅读量911

点赞数

分类专栏：前端效果合集文章标签： css html

本文链接：https://blog.csdn.net/hanbing1307/article/details/124785426

版权

本文介绍了如何使用CSS和HTML创建一个有趣的‘拉开窗帘’效果，当页面滚动时背景逐渐变亮，顶部粘性内容则变暗。通过简单的HTML结构和CSS代码，读者可以轻松复现并自定义此效果，进一步探索更多可能性。

摘要由CSDN通过智能技术生成

“拉开窗帘”就是背景在滚动时从暗变为亮，而顶部的内容在处于粘性位置时也会从亮变为暗。

展示效果如图：

下面用简介明了的代码来给大家介绍这个效果

首先是HTML部分：

类名 curtain是帘，窗帘的意思

类名invert是反转的意思

<!DOCTYPE html>
<html lang="en">
<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>Open the curtain effect 拉起窗帘效果</title>
    <link rel="stylesheet" href="./index.cs