From c3682d3c5951e84cdf085c62263af4c64e232f58 Mon Sep 17 00:00:00 2001
From: whycq <whycq>
Date: 星期五, 18 三月 2022 09:55:00 +0800
Subject: [PATCH] # 导航栏动画 背景颜色
---
src/main/webapp/static/css/car_vue.css | 14 +++++++
src/main/webapp/views/index.html | 2
src/main/webapp/static/css/crn.css | 3 -
src/main/webapp/static/css/pipeline.css | 3 -
src/main/webapp/static/css/index.css | 44 +++++++++++++++++++--
5 files changed, 56 insertions(+), 10 deletions(-)
diff --git a/src/main/webapp/static/css/car_vue.css b/src/main/webapp/static/css/car_vue.css
new file mode 100644
index 0000000..fe3d15f
--- /dev/null
+++ b/src/main/webapp/static/css/car_vue.css
@@ -0,0 +1,14 @@
+body {
+ background-color: #6CA7A8;
+}
+
+.title {
+ margin-top: 10px;
+ font-size: 20px;
+ text-align: center;
+
+}
+.bg-orgin {
+ color: white;
+ background-color: #FF5722;
+}
diff --git a/src/main/webapp/static/css/crn.css b/src/main/webapp/static/css/crn.css
index a70f372..0fa623e 100644
--- a/src/main/webapp/static/css/crn.css
+++ b/src/main/webapp/static/css/crn.css
@@ -1,12 +1,11 @@
body {
- background-color: #f1f1f1;
+ background-color: #6CA7A8;
}
.button-window {
float: left;
width: 100%;
height: 100%;
padding: 10px;
- background-color: #6CA7A8;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0 0 0 .3);
}
diff --git a/src/main/webapp/static/css/index.css b/src/main/webapp/static/css/index.css
index 089ed6d..2b5ee44 100644
--- a/src/main/webapp/static/css/index.css
+++ b/src/main/webapp/static/css/index.css
@@ -30,19 +30,53 @@
}
.sidebar {
- width: 7%;
+ width: 8%;
height: 40%;
line-height: 90px;
position: fixed;
top: 50%;
transform: translateY(-50%);
-
-
}
+/* Effect 1: Brackets */
+.cl-effect-1 a::before,
+.cl-effect-1 a::after {
+ display: inline-block;
+ opacity: 0;
+ -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+ -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+ transition: transform 0.3s, opacity 0.2s;
+}
+
+.cl-effect-1 a::before {
+ margin-right: 10px;
+ content: '[';
+ -webkit-transform: translateX(20px);
+ -moz-transform: translateX(20px);
+ transform: translateX(20px);
+}
+
+.cl-effect-1 a::after {
+ margin-left: 10px;
+ content: ']';
+ -webkit-transform: translateX(-20px);
+ -moz-transform: translateX(-20px);
+ transform: translateX(-20px);
+}
+
+.cl-effect-1 a:hover::before,
+.cl-effect-1 a:hover::after,
+.cl-effect-1 a:focus::before,
+.cl-effect-1 a:focus::after {
+ opacity: 1;
+ -webkit-transform: translateX(0px);
+ -moz-transform: translateX(0px);
+ transform: translateX(0px);
+}
+/* Effect 1: Brackets 馃憜*/
.sidebar ul {
font-size: 20px;
- font-weight: 5c00;
- padding-left: 15%;
+ font-weight: 500;
+ padding-left: 5%;
}
.sidebar a {
diff --git a/src/main/webapp/static/css/pipeline.css b/src/main/webapp/static/css/pipeline.css
index 820f5f4..8fe0e8a 100644
--- a/src/main/webapp/static/css/pipeline.css
+++ b/src/main/webapp/static/css/pipeline.css
@@ -1,6 +1,6 @@
body {
/*padding: 10px;*/
- background-color: #f1f1f1;
+ background-color: #6CA7A8;
}
main {
background-color: #fff;
@@ -14,7 +14,6 @@
width: 100%;
height: 100%;
padding: 10px;
- background-color: #6CA7A8;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0 0 0 .3);
}
diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html
index 98c2a29..e8d4ce3 100644
--- a/src/main/webapp/views/index.html
+++ b/src/main/webapp/views/index.html
@@ -12,7 +12,7 @@
<!-- <li class="right">娉ㄩ攢<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>-->
<!-- </div>-->
<div class="sidebar">
- <ul>
+ <ul class="cl-effect-1">
<li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">涓绘帶鍥�</a></li>
<li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">杈撻�佽澶�</a></li>
<li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">鍫嗗灈鏈�</a></li>
--
Gitblit v1.9.1