Skip to content

Commit 45c9f0f

Browse files
webVueBlogwebVueBlog
committed
feat: 拉起窗帘
1 parent 3824cb0 commit 45c9f0f

15 files changed

+252
-31
lines changed

‎.temp/app-enhancers/global-components-10.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-11.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-12.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-13.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-6.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-7.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-8.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/app-enhancers/global-components-9.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
3+
Vue.component("Badge", () => import("C:\\temp\\awesome-css\\node_modules\\vuepress-theme-reco\\global-components\\Badge"))
4+
5+
6+
export default {}

‎.temp/internal/app-enhancers.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import m0 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\0.js"
22
import m1 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\1.js"
33
import m2 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\data-block.js"
4-
import m3 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\global-components-5.js"
4+
import m3 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\global-components-13.js"
55
import m4 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\2.js"
66
import m5 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\3.js"
77
import m6 from "C:\\temp\\awesome-css\\.temp\\app-enhancers\\dynamic-pagation.js"

‎.temp/internal/page-components.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* Generated by "@vuepress/internal-page-components"
33
*/
44
export default {
5-
"v-d3bebd6a": () => import("C:\\temp\\awesome-css\\docs\\handbook\\transition.md"),
6-
"v-71b5b85d": () => import("C:\\temp\\awesome-css\\docs\\README.md")
5+
"v-71b5b85d": () => import("C:\\temp\\awesome-css\\docs\\README.md"),
6+
"v-17d17d01": () => import("C:\\temp\\awesome-css\\docs\\result\\pullCurtain.md"),
7+
"v-d3bebd6a": () => import("C:\\temp\\awesome-css\\docs\\handbook\\transition.md")
78
}

‎.temp/internal/routes.js

+16-8
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@ import GlobalLayout from "C:\\temp\\awesome-css\\node_modules\\@vuepress\\core\\
88

99
injectComponentOption(GlobalLayout, 'mixins', rootMixins)
1010
export const routes = [
11-
{
12-
name: "v-d3bebd6a",
13-
path: "/handbook/transition.html",
14-
component: GlobalLayout,
15-
beforeEnter: (to, from, next) => {
16-
ensureAsyncComponentsLoaded("Layout", "v-d3bebd6a").then(next)
17-
},
18-
},
1911
{
2012
name: "v-71b5b85d",
2113
path: "/",
@@ -28,6 +20,22 @@ export const routes = [
2820
path: "/index.html",
2921
redirect: "/"
3022
},
23+
{
24+
name: "v-17d17d01",
25+
path: "/result/pullCurtain.html",
26+
component: GlobalLayout,
27+
beforeEnter: (to, from, next) => {
28+
ensureAsyncComponentsLoaded("Layout", "v-17d17d01").then(next)
29+
},
30+
},
31+
{
32+
name: "v-d3bebd6a",
33+
path: "/handbook/transition.html",
34+
component: GlobalLayout,
35+
beforeEnter: (to, from, next) => {
36+
ensureAsyncComponentsLoaded("Layout", "v-d3bebd6a").then(next)
37+
},
38+
},
3139
{
3240
name: "v-b1564aac",
3341
path: "/tag/",

‎.temp/internal/siteData.js

+68-19
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,6 @@ export const siteData = {
1515
]
1616
],
1717
"pages": [
18-
{
19-
"frontmatter": {},
20-
"regularPath": "/handbook/transition.html",
21-
"relativePath": "handbook/transition.md",
22-
"key": "v-d3bebd6a",
23-
"path": "/handbook/transition.html",
24-
"headers": [
25-
{
26-
"level": 2,
27-
"title": "演示：",
28-
"slug": "演示"
29-
},
30-
{
31-
"level": 2,
32-
"title": "指定要转换的属性",
33-
"slug": "指定要转换的属性"
34-
}
35-
]
36-
},
3718
{
3819
"frontmatter": {},
3920
"regularPath": "/",
@@ -56,6 +37,11 @@ export const siteData = {
5637
"title": "属性",
5738
"slug": "属性"
5839
},
40+
{
41+
"level": 3,
42+
"title": "效果",
43+
"slug": "效果"
44+
},
5945
{
6046
"level": 2,
6147
"title": "留言评论",
@@ -81,8 +67,60 @@ export const siteData = {
8167
"title": "License",
8268
"slug": "license"
8369
}
70+
],
71+
"lastUpdated": "2022/5/18 上午11:45:28",
72+
"lastUpdatedTimestamp": 1652845528000
73+
},
74+
{
75+
"frontmatter": {},
76+
"regularPath": "/result/pullCurtain.html",
77+
"relativePath": "result/pullCurtain.md",
78+
"key": "v-17d17d01",
79+
"path": "/result/pullCurtain.html",
80+
"headers": [
81+
{
82+
"level": 2,
83+
"title": "让我们设置一些 CSS 变量",
84+
"slug": "让我们设置一些-css-变量"
85+
},
86+
{
87+
"level": 2,
88+
"title": "是时候拉开帷幕了",
89+
"slug": "是时候拉开帷幕了"
90+
},
91+
{
92+
"level": 2,
93+
"title": "制作粘性内容",
94+
"slug": "制作粘性内容"
95+
},
96+
{
97+
"level": 2,
98+
"title": "“拉开窗帘”演示",
99+
"slug": "拉开窗帘-演示"
100+
}
84101
]
85102
},
103+
{
104+
"frontmatter": {},
105+
"regularPath": "/handbook/transition.html",
106+
"relativePath": "handbook/transition.md",
107+
"key": "v-d3bebd6a",
108+
"path": "/handbook/transition.html",
109+
"headers": [
110+
{
111+
"level": 2,
112+
"title": "演示：",
113+
"slug": "演示"
114+
},
115+
{
116+
"level": 2,
117+
"title": "指定要转换的属性",
118+
"slug": "指定要转换的属性"
119+
}
120+
],
121+
"lastUpdated": "2022/5/18 上午11:45:28",
122+
"lastUpdatedTimestamp": 1652845528000
123+
},
86124
{
87125
"frontmatter": {
88126
"layout": "Tags",
@@ -168,6 +206,17 @@ export const siteData = {
168206
"path": "/handbook/transition"
169207
}
170208
]
209+
},
210+
{
211+
"title": "效果",
212+
"path": "/result/transition",
213+
"collapsable": false,
214+
"children": [
215+
{
216+
"title": "拉起窗帘",
217+
"path": "/result/pullCurtain"
218+
}
219+
]
171220
}
172221
]
173222
},

‎docs/.vuepress/config.js

+9
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,15 @@ module.exports = {
116116
title: "transition",
117117
path: "/handbook/transition"
118118
}],
119+
},
120+
{
121+
title: "效果",
122+
path: '/result/transition',
123+
collapsable: false, // 不折叠
124+
children: [{
125+
title: "拉起窗帘",
126+
path: "/result/pullCurtain"
127+
}],
119128
},
120129
]
121130
}

‎docs/README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88

99
### 属性
1010

11-
- [transition](https://webvueblog.github.io/awesome-css/handbook/transition.html)
11+
- [transition](https://webvueblog.github.io/awesome-css/handbook/transition.html)
12+
13+
### 效果
14+
15+
- [拉起窗帘](https://webvueblog.github.io/awesome-css/result/pullCurtain.html)
1216

1317
## 留言评论
1418

‎docs/result/pullCurtain.md

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
> 点击勘误[issues](https://github.com/webVueBlog/awesome-css/issues)，感谢大家的阅读
2+
3+
首先，我们需要一个用于放置窗帘的容器，我们将给它.curtain，我们有一个.invert子元素，它将作为我们的“粘性”框。最后，我们在这个盒子里有了内容。
4+
5+
```js
6+
<div class="curtain">
7+
<div class="invert">
8+
<h2>Section title</h2>
9+
</div>
10+
</div>
11+
```
12+
13+
## 让我们设置一些 CSS 变量
14+
15+
需要三个值。让我们用它们制作 CSS 变量:
16+
17+
- `--minh` 容器高度
18+
- `--color1` 浅颜色
19+
- `--color2` 深颜色
20+
21+
```js
22+
:root {
23+
--minh: 98vh;
24+
--color1: wheat;
25+
--color2: midnightblue;
26+
}
27+
```
28+
29+
## 是时候拉开帷幕了
30+
31+
- `linear-gradient` 代表“分裂”背景
32+
- `min-height` 容器底部的额外空间
33+
34+
我们使用`::after`伪元素将额外的空间添加到底部。这样，我们的“粘性”内容实际上会在滚动经过`::after`元素时粘在容器上。
35+
36+
```js
37+
.curtain {
38+
/** create the "split" background **/
39+
background-image: linear-gradient(to bottom, var(--color2) 50%, var(--color1) 50%);
40+
}
41+
42+
/** add extra space to the bottom (need this for the "sticky" effect) **/
43+
.curtain::after {
44+
content: "";
45+
display: block;
46+
min-height: var(--minh);
47+
}
48+
```
49+
50+
## 制作粘性内容
51+
52+
接下来，我们需要使我们的内容“粘性”，因为它完全位于容器内，因为背景和文本交换颜色值。事实上，我们已经为.curtain的子元素提供了一个.invert可以用作粘性容器的类。
53+
54+
55+
- position: sticky并top定义粘性。
56+
- mix-blend-mode: difference 将元素内部内容的颜色混合到.curtain的背景渐变中。
57+
- display: flex将演示内容居中。
58+
- min-height定义容器的高度并允许底部的额外空间。
59+
- color设置标题的颜色。
60+
61+
```js
62+
.invert {
63+
/** make the content sticky **/
64+
position: sticky;
65+
top: 20px;
66+
67+
/** blend the content with the contrast effect **/
68+
mix-blend-mode: difference;
69+
70+
/** center the content **/
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
75+
/** set the minimum height of the section **/
76+
min-height: var(--minh);
77+
}
78+
79+
h2 {
80+
/** set the color of the text **/
81+
color: var(--color1);
82+
}
83+
```
84+
85+
.curtain::after内容的高度是使用 CSS 变量设置的，其值与伪元素的高度值相同。
86+
87+
声明将mix-blend-mode: difference我们的内容与背景融合在一起。该difference值很复杂，但您可能会将其可视化为背景的反转文本颜色。
88+
89+
<iframe height="300" style="width: 100%;" scrolling="no" title="mix-blend-mode" src="https://codepen.io/webvueblog/embed/RwQpYdw?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
90+
See the Pen <a href="https://codepen.io/webvueblog/pen/RwQpYdw">
91+
mix-blend-mode</a> by 我是哪吒（达达） (<a href="https://codepen.io/webvueblog">@webvueblog</a>)
92+
on <a href="https://codepen.io">CodePen</a>.
93+
</iframe>
94+
95+
## “拉开窗帘”演示
96+
97+
<iframe height="300" style="width: 100%;" scrolling="no" title="pullCurtain" src="https://codepen.io/webvueblog/embed/vYdxzwY?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
98+
See the Pen <a href="https://codepen.io/webvueblog/pen/vYdxzwY">
99+
pullCurtain</a> by 我是哪吒（达达） (<a href="https://codepen.io/webvueblog">@webvueblog</a>)
100+
on <a href="https://codepen.io">CodePen</a>.
101+
</iframe>
102+

0 commit comments

Comments
 (0)