From 71a37baacca69bb964648bc660af6fc411c67e8d Mon Sep 17 00:00:00 2001 From: KeiferJu Date: Fri, 18 Jun 2021 11:19:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0demo=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- canvas/AnimatedBackground/index.html | 6 - canvas/AnimatedBackground/index2.html | 6 - canvas/AnimatedBackground/index3.html | 6 - canvas/AnimatedBackground/index4.html | 6 - config.js | 92 ++++++---- index.css | 184 ++++++++++++++++++++ index.htm | 237 +++++++++++++------------- index.js | 23 --- 8 files changed, 365 insertions(+), 195 deletions(-) create mode 100755 index.css delete mode 100644 index.js diff --git a/canvas/AnimatedBackground/index.html b/canvas/AnimatedBackground/index.html index 0200b05..0d29bef 100644 --- a/canvas/AnimatedBackground/index.html +++ b/canvas/AnimatedBackground/index.html @@ -23,12 +23,6 @@

Connect Three

- diff --git a/canvas/AnimatedBackground/index2.html b/canvas/AnimatedBackground/index2.html index fae2eda..65705af 100644 --- a/canvas/AnimatedBackground/index2.html +++ b/canvas/AnimatedBackground/index2.html @@ -23,12 +23,6 @@

Spirit

- diff --git a/canvas/AnimatedBackground/index3.html b/canvas/AnimatedBackground/index3.html index a1016f3..a318f63 100644 --- a/canvas/AnimatedBackground/index3.html +++ b/canvas/AnimatedBackground/index3.html @@ -23,12 +23,6 @@

Collab

- diff --git a/canvas/AnimatedBackground/index4.html b/canvas/AnimatedBackground/index4.html index a9ecbc2..399e87b 100644 --- a/canvas/AnimatedBackground/index4.html +++ b/canvas/AnimatedBackground/index4.html @@ -23,12 +23,6 @@

Morning Light

- diff --git a/config.js b/config.js index a47a91b..b098431 100644 --- a/config.js +++ b/config.js @@ -1,34 +1,58 @@ -export let config = { - txlists: [{ - name: '标题特效', - url: 'tx/dllcn/index.html' - }, { - name: '404', - url: 'tx/404_01/index.html' - }], - canvaslists: [{ - name: 'webglCanvas', - url: 'canvas/webglCanvas/index.html' - }, - { - name: 'AnimatedBackground', - url: 'canvas/AnimatedBackground/index.html' - }, - { - name: 'PoppingBubbles', - url: 'canvas/PoppingBubbles/index.html' - }, - { - name: '3DBackground', - url: 'canvas/3DBackground/index.html' - }, - { - name: '3DBackground2', - url: 'canvas/3DBackground/index2.html' - } - ], - loadinglists: [{ - name: 'css3-flower-loading', - url: 'loading/css3-flower-loading/index.html' - }] -} \ No newline at end of file +export let config = [{ + title: '特效', + data: [{ + name: '标题特效', + url: 'tx/dllcn/index.html' + }, { + name: '404', + url: 'tx/404_01/index.html' + }] + }, + { + title: 'Canvas背景', + data: [{ + name: 'webglCanvas', + url: 'canvas/webglCanvas/index.html' + }, + { + name: 'AnimatedBackground', + data: [{ + name: 'AnimatedBackground', + url: 'canvas/AnimatedBackground/index.html' + }, { + name: 'AnimatedBackground2', + url: 'canvas/AnimatedBackground/index2.html' + }, { + name: 'AnimatedBackground3', + url: 'canvas/AnimatedBackground/index3.html' + }, { + name: 'AnimatedBackground4', + url: 'canvas/AnimatedBackground/index4.html' + }] + }, + { + name: 'PoppingBubbles', + url: 'canvas/PoppingBubbles/index.html' + }, + { + name: '3DBackground', + data: [{ + name: '3DBackground', + url: 'canvas/3DBackground/index.html' + }, + { + name: '3DBackground2', + url: 'canvas/3DBackground/index2.html' + } + ] + } + ] + }, + { + title: 'loading动画', + data: [{ + name: 'css3-flower-loading', + url: 'loading/css3-flower-loading/index.html' + }] + }, +] \ No newline at end of file diff --git a/index.css b/index.css new file mode 100755 index 0000000..893bcdd --- /dev/null +++ b/index.css @@ -0,0 +1,184 @@ +#container { + position: fixed; + width: 100vw; + height: 100vh; + display: flex; + top: 0; + left: 0; +} + +ul { + list-style: none; + font-size: 1.2rem; + padding: 0; +} + +.tx-list { + width: 300px; +} + +.tx-ifram { + flex: 1; + /* border: 1px solid; */ + position: relative; +} + +iframe { + position: absolute; + width: 100%; + height: 100%; +} + +.tx-ol { + cursor: pointer; + margin: 10px 0; +} + +.tx-ol:hover { + color: aqua; +} + +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out +} + +@keyframes octocat-wave { + + 0%, + 100% { + transform: rotate(0) + } + + 20%, + 60% { + transform: rotate(-25deg) + } + + 40%, + 80% { + transform: rotate(10deg) + } +} + +@media (max-width:500px) { + .github-corner:hover .octo-arm { + animation: none + } + + .github-corner .octo-arm { + animation: octocat-wave 560ms ease-in-out + } +} + +.is-scrollable { + overflow-y: auto; +} + +.dashboard { + display: flex; + flex-direction: row; +} +.dashboard.is-full-height { + height: 100vh; +} +.dashboard-panel { + display: flex; + flex-direction: column; + padding: 2rem 1.5rem; + flex: 0 0 25rem; + height: 100%; + background: #222 !important; +} +.dashboard-panel.left { + flex: 0 0 25rem; +} +.dashboard-panel.right { + flex: 0 0 25rem; +} +.dashboard-panel.has-thick-padding { + padding: 3rem 0; +} +.dashboard-panel.is-one-quarter { + flex: 0 0 25%; +} +.dashboard-panel.is-half { + flex: 0 0 50%; +} +.dashboard-panel.is-one-third { + flex: 0 0 33.3333333333%; +} +.dashboard-panel.is-small { + flex: 0 0 15rem; +} +.dashboard-panel.is-medium { + flex: 0 0 20rem; +} +.dashboard-panel.is-large { + flex: 0 0 30rem; +} +.dashboard-panel-header.is-centered, .dashboard-panel-content.is-centered, .dashboard-panel-footer.is-centered { + display: flex; + justify-content: center; +} +.dashboard-panel-header { + margin-bottom: 2rem; +} +.dashboard-panel-main { + flex: 1; +} +.dashboard-panel-footer { + margin-top: 2rem; +} +.dashboard-main { + display: flex; + flex: 1; + display: flex; + flex-direction: column; + min-height: 100vh; +} +.dashboard-main .navbar.is-fixed-top { + position: -webkit-sticky; + position: sticky; + top: 0; +} +.dashboard-main .footer { + flex: 1; +} + +/*# sourceMappingURL=bulma-dashboard.css.map */ + +.section{ + padding: 0; + position: relative; + width: 100%; + height: 100%; +} +.footer{ + padding: 0; +} +img{ + width: 30%; +} + +.menu-label{ + font-size: 1.2rem; + font-weight: bold; + margin: 1rem 0 !important; + color: #3298dc; +} + +.menu-list{ + font-size: 1rem; + +} +.menu-ol{ + padding-left: 3rem; +} + +.menu-list a{ + color: #fff; +} + +a{ + color: #fff; +} \ No newline at end of file diff --git a/index.htm b/index.htm index 9063409..27223f9 100644 --- a/index.htm +++ b/index.htm @@ -2,129 +2,138 @@ - - - - 前端特效 + + + + 前端特效 - + + + - -
- - -
-

特效

-
    -
  1. -
    {{list.name}}
    -
    2. -
-

Canvas背景

-
    -
  1. -
    {{list.name}}
    -
    2. -
-

loading动画

-
    -
  1. -
    {{list.name}}
    -
    2. -
-
-
- +
+ + +
+
+
+
+
+ +
+ +
+
+ + +
+ + +
+ +
+
- + \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 65858ab..0000000 --- a/index.js +++ /dev/null @@ -1,23 +0,0 @@ -import { config } from "./config.js"; - -const HelloVueApp = { - data() { - return { - txlists: [], - pageurl: "" - } - }, - created() { - this.txlists = config.txlists ? config.txlists : []; - this.canvaslists = config.canvaslists ? config.canvaslists : []; - this.loadinglists = config.loadinglists ? config.loadinglists : []; - this.pageurl = this.canvaslists[0].url - }, - methods: { - todoPage(url) { - this.pageurl = url; - } - } -} - -Vue.createApp(HelloVueApp).mount('#container') \ No newline at end of file