From 73ac3ee2a0b61f6787aefcd0370b41f3f3916a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98caohq33221?= <caohq33221@hundsun.com>
Date: Fri, 22 Jul 2022 16:47:56 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=94=B9=E5=86=85=E5=AE=B9]=E6=8B=89?=
 =?UTF-8?q?=E5=BC=80=E5=B8=B7=E5=B9=95=E6=95=88=E6=9E=9C=20[=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=E7=B1=BB=E5=9E=8B]=20=E6=96=B0=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  | 66 ++++++++++++++++++++++++++++++++++++
 curtains-effect/.project   | 37 +++++++++++++++++++++
 curtains-effect/index.html | 68 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 171 insertions(+)
 create mode 100644 README.md
 create mode 100644 curtains-effect/.project
 create mode 100644 curtains-effect/index.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6fef19d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,66 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: caohq33221
+ * @Date: 2022-07-22 16:06:42
+ * @LastEditors: codercao
+ * @LastEditTime: 2022-07-22 16:42:11
+-->
+
+## 简介 
+
+拉开帷幕效果，即当滚动到元素上时，背景和文本都会改变颜色。页面背景从暗到亮，上面的内容也从亮到暗，同时处于吸附（sticky）定位
+
+![curtains-effect.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c79c55d557e46eba468614a2b858123~tplv-k3u1fbpfcp-watermark.image?)
+
+## 最新动态  
+
+- [2022-07-22] [拉开帷幕效果](https://github.com/HongqingCao/my-code/tree/curtains-effect)   
+
+
+
+
+## 布局相关（Html/css/JS）  
+- :book: [1、各厂云服务官网体验，分析并含技巧实现代码，未完待续)]()  
+- :book: [2、从青铜到王者10个css3伪类使用技巧和运用](https://github.com/HongqingCao/my-code/tree/Pseudo-classes)  
+- :book: [3、使用CSS自定义属性构建骨架屏](https://github.com/HongqingCao/my-code/tree/skeleton-demo)  
+- :book: [4、CSS变量，在前端复杂布局和交互上的探索](https://github.com/HongqingCao/my-code/tree/dry-switching-with-css)  
+
+## Vue  
+
+- :book: [1、VeeValidate (VeeValidate是Vue.js的验证库，实例应用体验)](https://github.com/HongqingCao/my-code/tree/VeeValidate)  
+- :book: [2、vueslidershow( 自己封装一个vue的响应式自适应轮播图组件 )](https://github.com/HongqingCao/my-code/tree/VueSliderShow)  
+- :book: [3、阿里达摩院头部导航](https://github.com/HongqingCao/my-code/tree/damopotal)  
+- :book: [4、Vue响应式原理-从Object.defineProperty到proxy实现观察者机制的探索](https://juejin.im/post/5d7201cdf265da03d7283e1d)  
+- :book: [5、开发微信一键制作“国庆头像”小工具，比你@微信官方靠谱多了【基于 Vue2.6x 构建】](https://juejin.im/post/5d8dbc28f265da5bac300c00)  
+  
+## React  
+
+- :book: [1、react-native （找厕所APP小程序 安卓版）](https://github.com/HongqingCao/my-code/tree/Toilet-React-native)  
+
+  
+ 
+## Node  
+- :book:  [1、nodeJs+express4（全面入门应用nodeJs+express4框架技术点，写有登陆功能、增删改列表功能的小后台）](https://github.com/HongqingCao/my-code/tree/Node-Express4)   
+
+## 小程序  
+- :book: [1、geekbook( 基于mpVue框架构建的极客图书馆小程序 )](https://github.com/HongqingCao/my-code/tree/geekbook)  
+
+ ## 微信公众号H5  
+- :book: [1、微信H5页面前端开发，大多数人都会遇到的几个兼容性坑](https://juejin.im/post/5d47d2eff265da03f77e4e3a)  
+ 
+  
+## 其他  
+
+**[:arrow_up: 返回目录](##最新动态)**
+
+
+## 捐赠
+
+您的捐赠，是我持续开源的动力。
+
+
+支付宝 | 微信
+------|------
+![](./public/alipay.jpg) | ![](./public/wechat.jpg)
+
diff --git a/curtains-effect/.project b/curtains-effect/.project
new file mode 100644
index 0000000..6eefa82
--- /dev/null
+++ b/curtains-effect/.project
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>curtains-effect</name>
+	<comment>Create By HBuilder</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1658456539809</id>
+			<name></name>
+			<type>10</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.orFilterMatcher</id>
+				<arguments>
+					<matcher>
+						<id>org.eclipse.ui.ide.multiFilter</id>
+						<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
+					</matcher>
+					<matcher>
+						<id>org.eclipse.ui.ide.multiFilter</id>
+						<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
+					</matcher>
+				</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
diff --git a/curtains-effect/index.html b/curtains-effect/index.html
new file mode 100644
index 0000000..d307064
--- /dev/null
+++ b/curtains-effect/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+  <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>
+
+<style>
+* {
+  padding: 0;
+  margin: 0;
+}
+:root {
+  --minh: 100vh;
+  --color1: wheat;
+  --color2: midnightblue;
+}
+
+html {
+  font-size: 60px;
+}
+.title {
+  height: 100px;
+  line-height: 100px;
+  font-size: 22px;
+  text-align: center;
+}
+
+.curtain {
+  background-image: linear-gradient(
+    to bottom,
+    var(--color2) 50%,
+    var(--color1) 50%
+  );
+}
+
+.curtain::after {
+  content: '';
+  display: block;
+  min-height: var(--minh);
+}
+
+.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);
+}
+</style>
\ No newline at end of file