From 84a216b23e6c447e485c5b816c5b66e22ab85dd4 Mon Sep 17 00:00:00 2001 From: Rieko-wang Date: Sat, 3 Dec 2022 23:23:32 +0800 Subject: [PATCH] 123 --- css/style.css | 46 ++++++++++++++++++++++++++++++++++++++++---- index.html | 53 ++++++++++++++++++++++++++++----------------------- 2 files changed, 71 insertions(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index 0d77d4b..d38c6d1 100644 --- a/css/style.css +++ b/css/style.css @@ -140,11 +140,45 @@ img { /* padding-top: 48px; */ overflow-y: scroll; box-sizing: border-box; + transition: left 0.4s; +} +.my-account { + width: 100%; + height: 100%; + left: 100%; + position: fixed; + z-index: 99; + + background-color: #f7f7f7; + /* padding-top: 48px; */ + overflow-y: scroll; + box-sizing: border-box; + transition: left 0.4s; +} +.my-account:target { + left: 0; +} + +@keyframes moveLeft { + 0% { + let: 100%; + } + 100% { + let: 70%; + } } +@keyframes moveRight { + 0% { + let: 0%; + } + 100% { + let: 100%; + } +} .billing:target { left: 0; - transition: left 0.4s; + /* transition: left 0.4s; */ } .list-class:target .billing-header { left: 0; @@ -163,16 +197,16 @@ img { z-index: 99; } -.container:target .billing { +/* .container:target .billing { left: 100%; - transition: left 0.4s; + position: fixed; } .container:target .billing-header { left: 100%; transition: left 0.4s; -} +} */ .loading { width: 3rem; @@ -392,3 +426,7 @@ img { background-color: #f3b046; color: #fff; } + +.moveRight { + left: 0 !important; +} diff --git a/index.html b/index.html index 625cc57..645a28d 100644 --- a/index.html +++ b/index.html @@ -11,34 +11,34 @@ - -
-