From b837bb6accba93a732aeeca719b24d74e2fb8ba4 Mon Sep 17 00:00:00 2001 From: NitroRCr <60081994+NitroRCr@users.noreply.github.com> Date: Fri, 3 Jun 2022 11:28:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=20&=20?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 130 ++++++++++++++++++---------------------- css/index.css.map | 2 +- css/index.scss | 147 +++++++++++++++++++++------------------------- index.html | 59 +++++++++---------- js/WordsHide.js | 3 - js/simple.js | 78 ++++++++++++++++-------- simple.html | 31 ++++++---- 7 files changed, 225 insertions(+), 225 deletions(-) diff --git a/css/index.css b/css/index.css index 68e1637..fb59a9d 100644 --- a/css/index.css +++ b/css/index.css @@ -54,83 +54,67 @@ h3 { .checkboxs { margin-top: 0; } -.parallax-stage { +.main { scroll-behavior: smooth; - perspective: 1px; - height: 100vh; - width: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; } - .parallax-stage .main { + position: relative; + padding: 0; } + .main .background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: cover; + background-position: center; + transition: background 1s ease; + background-image: url(../img/dark-mobile-compressed/port-black.png); + filter: brightness(75%); } + @media screen and (orientation: landscape) { + .main .background .container { + background-image: url(../img/dark-PC-compressed/land-black.png); } } + .main > .row, + .main .route { position: relative; - transform-style: preserve-3d; - padding: 0; } - .parallax-stage .main > .row, - .parallax-stage .main .route { - position: relative; - margin: 0; - overflow: hidden; - display: block; } - .parallax-stage .main > .row .container, - .parallax-stage .main .route .container { - font-size: 15px; } - .parallax-stage .main > .row .container.dark, - .parallax-stage .main .route .container.dark { + margin: 0; + overflow: hidden; + display: block; } + .main > .row .container, + .main .route .container { + font-size: 15px; } + .main > .row .container.dark, + .main .route .container.dark { + color: #fff; } + .main > .row .container.dark .head, + .main .route .container.dark .head { color: #fff; } - .parallax-stage .main > .row .container.dark .head, - .parallax-stage .main .route .container.dark .head { - color: #fff; } - .parallax-stage .main > .row .bg-container, - .parallax-stage .main .route .bg-container { - transform-style: preserve-3d; - height: 100%; - width: 100%; + .main > .row.row1, + .main .route.row1 { + min-height: 100vh; } + .main > .row.row1 .letf-bottom-cornor, + .main .route.row1 .letf-bottom-cornor { position: absolute; - z-index: -2; } - .parallax-stage .main > .row .bg-container .background, - .parallax-stage .main .route .bg-container .background { - position: absolute; - margin: 0; - transition: background 0.8s ease; - transform: translate3d(-2vw, -100vh, -2px) scale(3.1); - transform-origin: top; - width: 100%; - background-size: cover; - background-position: center; - height: calc((100% - 100vh)/3 + 100vh); - transition: background 1s ease; - background-image: url(../img/dark-mobile-compressed/port-black.png); } - @media screen and (orientation: landscape) { - .parallax-stage .main > .row .bg-container .background .container, - .parallax-stage .main .route .bg-container .background .container { - background-image: url(../img/dark-PC-compressed/land-black.png); } } - .parallax-stage .main > .row .bg-container .filter, - .parallax-stage .main .route .bg-container .filter { - height: 100%; - width: 100%; - position: absolute; - background-color: rgba(0, 0, 0, 0.25); } - .parallax-stage .main > .row.row1, - .parallax-stage .main .route.row1 { - min-height: 100vh; } - .parallax-stage .main > .row.row1 .letf-bottom-cornor, - .parallax-stage .main .route.row1 .letf-bottom-cornor { - position: absolute; - left: 5px; - bottom: 0.4em; - color: #eee; - font-size: 0.9em; - line-height: 1.3; } - .parallax-stage .main > .row.row1 h3, - .parallax-stage .main .route.row1 h3 { - margin-top: 1rem; - margin-bottom: 0; } - .parallax-stage div.head { - font-weight: bold; - font-size: 2em; - color: #555; - line-height: 1.7; - margin: 5px 0; } + left: 5px; + bottom: 0.4em; + color: #eee; + font-size: 0.9em; + line-height: 1.3; } + .main > .row.row1 h3, + .main .route.row1 h3 { + margin-top: 1rem; + margin-bottom: 0; } + .main > .row.row2, + .main .route.row2 { + background-color: #fff; } + .main > .row.row4, + .main .route.row4 { + background-color: #fff; } + +div.head { + font-weight: bold; + font-size: 2em; + color: #555; + line-height: 1.7; + margin: 5px 0; } a.n-dark { color: white; diff --git a/css/index.css.map b/css/index.css.map index 1efffaa..2a385b3 100644 --- a/css/index.css.map +++ b/css/index.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["index.scss"], "names": [], "file": "index.css" diff --git a/css/index.scss b/css/index.scss index 7c3ab6d..0630867 100644 --- a/css/index.scss +++ b/css/index.scss @@ -71,105 +71,90 @@ h3 { margin-top: 0; } -.parallax-stage { + +.main { scroll-behavior: smooth; - perspective: 1px; - height: 100vh; - width: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; + position: relative; + padding: 0; + - .main { - position: relative; - transform-style: preserve-3d; - padding: 0; - > .row, - .route { - position: relative; - margin: 0; - overflow: hidden; - display: block; + .background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-size: cover; + background-position: center; + transition: background 1s ease; + background-image: url(../img/dark-mobile-compressed/port-black.png); + filter: brightness(75%); + @media screen and (orientation: landscape) { .container { - &.dark { - color: #fff; + background-image: url(../img/dark-PC-compressed/land-black.png); + } + } + } - .head { - color: #fff; - } - } + >.row, + .route { + position: relative; + margin: 0; + overflow: hidden; + display: block; - &.light { - } + .container { + &.dark { + color: #fff; - font-size: 15px; + .head { + color: #fff; + } } - .bg-container { - transform-style: preserve-3d; - height: 100%; - width: 100%; + font-size: 15px; + } + + + &.row1 { + min-height: 100vh; + + .letf-bottom-cornor { position: absolute; - z-index: -2; - - .background { - position: absolute; - margin: 0; - transition: background 0.8s ease; - transform: translate3d(-2vw, -100vh, -2px) scale(3.1); - transform-origin: top; - width: 100%; - background-size: cover; - background-position: center; - height: calc((100% - 100vh)/3 + 100vh); - transition: background 1s ease; - background-image: url(../img/dark-mobile-compressed/port-black.png); - - @media screen and (orientation: landscape) { - .container { - background-image: url(../img/dark-PC-compressed/land-black.png); - } - } - } - - .filter { - height: 100%; - width: 100%; - position: absolute; - background-color: rgba(0, 0, 0, 0.25); - } + left: 5px; + bottom: 0.4em; + color: #eee; + font-size: 0.9em; + line-height: 1.3; } - &.row1 { - min-height: 100vh; - .letf-bottom-cornor { - position: absolute; - left: 5px; - bottom: 0.4em; - color: #eee; - font-size: 0.9em; - line-height: 1.3; - } - h3 { - margin-top: 1rem; - margin-bottom: 0; - } + h3 { + margin-top: 1rem; + margin-bottom: 0; } + } - &.row3 {} + &.row2 { + background-color: #fff; } - } - div.head { - font-weight: bold; - font-size: 2em; - color: #555; - line-height: 1.7; - margin: 5px 0; + &.row4 { + background-color: #fff; + } } } +div.head { + font-weight: bold; + font-size: 2em; + color: #555; + line-height: 1.7; + margin: 5px 0; +} + + a.n-dark { color: white; padding: 5px 7px; @@ -183,7 +168,7 @@ footer { height: 8em; width: 100%; - > div { + >div { margin-top: 2.5em; color: #777; font-weight: bold; @@ -212,4 +197,4 @@ footer { .one-text-a { color: #eee; -} +} \ No newline at end of file diff --git a/index.html b/index.html index 2b0c70f..b3dac47 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,10 @@ -
+
+
+
-
-
-
-

WordsAway

"Keep keywords away."
@@ -88,14 +86,14 @@

适合酷安现状

-

更多选项

-

增强模式、竖向排列、链接转短链接...

+

功能多样

+

多种处理方式任你选择，对链接/号码等的兼容应有尽有

-

公告

+

最近更新 2022-5-29

- 已放弃对酷安的支持
- （这是迟早的事） + 新增功能 将链接替换为平台外链
+ 修复 样式异常

@@ -166,6 +164,15 @@

Start

+