From 3a5d6662fbeb80426d9708a5d4684bdd5c1f072f Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 02 Aug 2022 17:37:00 +0800
Subject: [PATCH] 优化卡片外链,碎碎念标志
---
src/App.vue | 38 ++++++++++++++++++++++++++++++++++++++
1 files changed, 38 insertions(+), 0 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f7d2f41..421793e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,7 @@
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px;
+ height: 8px;
/*高宽分别对应横竖滚动条的尺寸*/
}
@@ -47,4 +48,41 @@
margin-top: 20px;
margin-bottom: 20px;
}
+
+ a {
+ position: relative;
+ }
+
+ a:hover:after {
+ left: 0;
+ width: 100%;
+ -webkit-transition: width 350ms;
+ -moz-transition: width 350ms;
+ -ms-transition: width 350ms;
+ -o-transition: width 350ms;
+ transition: width 350ms;
+ }
+
+ a:after {
+ position: absolute;
+ bottom: -0.0625rem;
+ left: 100%;
+ width: 0;
+ border-bottom: 0.0625rem solid #30a9de;
+ content: "";
+ -webkit-transition: width 350ms, left 350ms;
+ -moz-transition: width 350ms, left 350ms;
+ -ms-transition: width 350ms, left 350ms;
+ -o-transition: width 350ms, left 350ms;
+ transition: width 350ms, left 350ms;
+ }
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity .5s;
+ }
+
+ .fade-enter,
+ .fade-leave-to {
+ opacity: 0;
+ }
</style>
--
Gitblit v1.9.1