summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2022-02-22 00:58:56 +0100
committerache <ache@ache.one>2022-02-22 00:58:56 +0100
commit36ba09479e6751e33b3a0aa282240f32b4023f59 (patch)
tree87145cfaca77344a76c2afc11b3ecdc29e0229d9
parentAdd example biblio (diff)
Add css biblio
-rw-r--r--src/css/bibli.scss128
1 files changed, 128 insertions, 0 deletions
diff --git a/src/css/bibli.scss b/src/css/bibli.scss
new file mode 100644
index 0000000..1b171a4
--- /dev/null
+++ b/src/css/bibli.scss
@@ -0,0 +1,128 @@
+
+.book-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ perspective: 600px;
+}
+@keyframes initAnimation {
+ 0% {
+ transform: rotateY(0deg);
+ }
+ 100% {
+ transform: rotateY(-30deg);
+ }
+}
+.book {
+ width: 170px;
+ height: 260px;
+ position: relative;
+ transform-style: preserve-3d;
+ transform: rotateY(-30deg);
+ transition: 1s ease;
+ animation: 1s ease 0s 1 initAnimation;
+
+ &:hover {
+ transform: rotateY(0deg);
+ }
+
+ > :first-child {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: red;
+ width: 170px;
+ height: 260px;
+ transform: translateZ(25px);
+ background-color: #01060f;
+ border-radius: 0 2px 2px 0;
+ box-shadow: 5px 5px 10px #666;
+ }
+ &::before {
+ position: absolute;
+ content: ' ';
+ background-color: blue;
+ left: 0;
+ top: 3px;
+ width: 48px;
+ height: 254px;
+ transform: translateX(142px) rotateY(90deg);
+ background: linear-gradient(90deg,
+ #fff 0%,
+ #f9f9f9 5%,
+ #fff 10%,
+ #f9f9f9 15%,
+ #fff 20%,
+ #f9f9f9 25%,
+ #fff 30%,
+ #f9f9f9 35%,
+ #fff 40%,
+ #f9f9f9 45%,
+ #fff 50%,
+ #f9f9f9 55%,
+ #fff 60%,
+ #f9f9f9 65%,
+ #fff 70%,
+ #f9f9f9 75%,
+ #fff 80%,
+ #f9f9f9 85%,
+ #fff 90%,
+ #f9f9f9 95%,
+ #fff 100%
+ );
+ }
+
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: ' ';
+ width: 170px;
+ height: 260px;
+ transform: translateZ(-25px);
+ background-color: #01060f;
+ border-radius: 0 2px 2px 0;
+ box-shadow: -10px 0 30px 10px #666;
+ }
+}
+#container {
+ display: flex;
+ flex-flow: row wrap;
+ padding: 0 5px 0px 5px;
+ div .book {
+ top: 15px;
+ left: 15px;
+ }
+ section {
+ width: 222px;
+ height: 331px;
+ margin: 10px;
+ transform-style: preserve-3d;
+ overflow: hidden;
+ position: relative;
+ transition: all 0.55s ease;
+ transform-style: preserve-3d;
+ .jv {
+ width: 444px;
+ height: 662px;
+ transition: all 0.55s ease;
+ background: linear-gradient( to top right, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.5) 70%);
+ background-position: 0 -100px;
+ &:hover {
+ background-position: -100px 0px;
+ transition: all 1s ease;
+ }
+ }
+ &:hover {
+ transform: scale(1.02) perspective(800px) rotateX(5deg);
+ }
+ }
+}
+@keyframes shine {
+ to {
+ opacity: 1;
+ bottom: -30%;
+ right: 150%;
+ }
+}
+