docs: delete home
This commit is contained in:
parent
f2a4633788
commit
5c1337f21a
692
home.html
692
home.html
@ -1,692 +0,0 @@
|
||||
<!--
|
||||
title: 欢迎
|
||||
description:
|
||||
published: true
|
||||
date: 2024-03-16T06:40:55.541Z
|
||||
tags:
|
||||
editor: code
|
||||
dateCreated: 2023-02-19T05:55:06.863Z
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CSS Cards</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="app">
|
||||
<div class="cardList">
|
||||
<button class="cardList__btn btn btn--left">
|
||||
<div class="icon">
|
||||
<svg>
|
||||
<use xlink:href="#arrow-left"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="cards__wrapper">
|
||||
<div class="card current--card">
|
||||
<div class="card__image">
|
||||
<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card next--card">
|
||||
<div class="card__image">
|
||||
<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card previous--card">
|
||||
<div class="card__image">
|
||||
<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="cardList__btn btn btn--right">
|
||||
<div class="icon">
|
||||
<svg>
|
||||
<use xlink:href="#arrow-right"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="infoList">
|
||||
<div class="info__wrapper">
|
||||
<div class="info current--info">
|
||||
<h1 class="text name">Highlands</h1>
|
||||
<h4 class="text location">Scotland</h4>
|
||||
<p class="text description">The mountains are calling</p>
|
||||
</div>
|
||||
|
||||
<div class="info next--info">
|
||||
<h1 class="text name">Machu Pichu</h1>
|
||||
<h4 class="text location">Peru</h4>
|
||||
<p class="text description">Adventure is never far away</p>
|
||||
</div>
|
||||
|
||||
<div class="info previous--info">
|
||||
<h1 class="text name">Chamonix</h1>
|
||||
<h4 class="text location">France</h4>
|
||||
<p class="text description">Let your dreams come true</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="app__bg">
|
||||
<div class="app__bg__image current--image">
|
||||
<img src="https://source.unsplash.com/Z8dtTatMVMw" alt="" />
|
||||
</div>
|
||||
<div class="app__bg__image next--image">
|
||||
<img src="https://source.unsplash.com/9dmycbFE7mQ" alt="" />
|
||||
</div>
|
||||
<div class="app__bg__image previous--image">
|
||||
<img src="https://source.unsplash.com/m7K4KzL5aQ8" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading__wrapper">
|
||||
<div class="loader--text">Loading...</div>
|
||||
<div class="loader">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<svg class="icons" style="display: none;">
|
||||
<symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<polyline points='328 112 184 256 328 400'
|
||||
style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
|
||||
</symbol>
|
||||
<symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
|
||||
<polyline points='184 112 328 256 184 400'
|
||||
style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
console.clear();
|
||||
|
||||
const { gsap, imagesLoaded } = window;
|
||||
|
||||
const buttons = {
|
||||
prev: document.querySelector(".btn--left"),
|
||||
next: document.querySelector(".btn--right"),
|
||||
};
|
||||
const cardsContainerEl = document.querySelector(".cards__wrapper");
|
||||
const appBgContainerEl = document.querySelector(".app__bg");
|
||||
|
||||
const cardInfosContainerEl = document.querySelector(".info__wrapper");
|
||||
|
||||
buttons.next.addEventListener("click", () => swapCards("right"));
|
||||
|
||||
buttons.prev.addEventListener("click", () => swapCards("left"));
|
||||
|
||||
function swapCards(direction) {
|
||||
const currentCardEl = cardsContainerEl.querySelector(".current--card");
|
||||
const previousCardEl = cardsContainerEl.querySelector(".previous--card");
|
||||
const nextCardEl = cardsContainerEl.querySelector(".next--card");
|
||||
|
||||
const currentBgImageEl = appBgContainerEl.querySelector(".current--image");
|
||||
const previousBgImageEl = appBgContainerEl.querySelector(".previous--image");
|
||||
const nextBgImageEl = appBgContainerEl.querySelector(".next--image");
|
||||
|
||||
changeInfo(direction);
|
||||
swapCardsClass();
|
||||
|
||||
removeCardEvents(currentCardEl);
|
||||
|
||||
function swapCardsClass() {
|
||||
currentCardEl.classList.remove("current--card");
|
||||
previousCardEl.classList.remove("previous--card");
|
||||
nextCardEl.classList.remove("next--card");
|
||||
|
||||
currentBgImageEl.classList.remove("current--image");
|
||||
previousBgImageEl.classList.remove("previous--image");
|
||||
nextBgImageEl.classList.remove("next--image");
|
||||
|
||||
currentCardEl.style.zIndex = "50";
|
||||
currentBgImageEl.style.zIndex = "-2";
|
||||
|
||||
if (direction === "right") {
|
||||
previousCardEl.style.zIndex = "20";
|
||||
nextCardEl.style.zIndex = "30";
|
||||
|
||||
nextBgImageEl.style.zIndex = "-1";
|
||||
|
||||
currentCardEl.classList.add("previous--card");
|
||||
previousCardEl.classList.add("next--card");
|
||||
nextCardEl.classList.add("current--card");
|
||||
|
||||
currentBgImageEl.classList.add("previous--image");
|
||||
previousBgImageEl.classList.add("next--image");
|
||||
nextBgImageEl.classList.add("current--image");
|
||||
} else if (direction === "left") {
|
||||
previousCardEl.style.zIndex = "30";
|
||||
nextCardEl.style.zIndex = "20";
|
||||
|
||||
previousBgImageEl.style.zIndex = "-1";
|
||||
|
||||
currentCardEl.classList.add("next--card");
|
||||
previousCardEl.classList.add("current--card");
|
||||
nextCardEl.classList.add("previous--card");
|
||||
|
||||
currentBgImageEl.classList.add("next--image");
|
||||
previousBgImageEl.classList.add("current--image");
|
||||
nextBgImageEl.classList.add("previous--image");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeInfo(direction) {
|
||||
let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
|
||||
let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
|
||||
let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");
|
||||
|
||||
gsap.timeline()
|
||||
.to([buttons.prev, buttons.next], {
|
||||
duration: 0.2,
|
||||
opacity: 0.5,
|
||||
pointerEvents: "none",
|
||||
})
|
||||
.to(
|
||||
currentInfoEl.querySelectorAll(".text"),
|
||||
{
|
||||
duration: 0.4,
|
||||
stagger: 0.1,
|
||||
translateY: "-120px",
|
||||
opacity: 0,
|
||||
},
|
||||
"-="
|
||||
)
|
||||
.call(() => {
|
||||
swapInfosClass(direction);
|
||||
})
|
||||
.call(() => initCardEvents())
|
||||
.fromTo(
|
||||
direction === "right"
|
||||
? nextInfoEl.querySelectorAll(".text")
|
||||
: previousInfoEl.querySelectorAll(".text"),
|
||||
{
|
||||
opacity: 0,
|
||||
translateY: "40px",
|
||||
},
|
||||
{
|
||||
duration: 0.4,
|
||||
stagger: 0.1,
|
||||
translateY: "0px",
|
||||
opacity: 1,
|
||||
}
|
||||
)
|
||||
.to([buttons.prev, buttons.next], {
|
||||
duration: 0.2,
|
||||
opacity: 1,
|
||||
pointerEvents: "all",
|
||||
});
|
||||
|
||||
function swapInfosClass() {
|
||||
currentInfoEl.classList.remove("current--info");
|
||||
previousInfoEl.classList.remove("previous--info");
|
||||
nextInfoEl.classList.remove("next--info");
|
||||
|
||||
if (direction === "right") {
|
||||
currentInfoEl.classList.add("previous--info");
|
||||
nextInfoEl.classList.add("current--info");
|
||||
previousInfoEl.classList.add("next--info");
|
||||
} else if (direction === "left") {
|
||||
currentInfoEl.classList.add("next--info");
|
||||
nextInfoEl.classList.add("previous--info");
|
||||
previousInfoEl.classList.add("current--info");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateCard(e) {
|
||||
const card = e.currentTarget;
|
||||
const box = card.getBoundingClientRect();
|
||||
const centerPosition = {
|
||||
x: box.left + box.width / 2,
|
||||
y: box.top + box.height / 2,
|
||||
};
|
||||
let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
|
||||
gsap.set(card, {
|
||||
"--current-card-rotation-offset": `${angle}deg`,
|
||||
});
|
||||
const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
|
||||
gsap.set(currentInfoEl, {
|
||||
rotateY: `${angle}deg`,
|
||||
});
|
||||
}
|
||||
|
||||
function resetCardTransforms(e) {
|
||||
const card = e.currentTarget;
|
||||
const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
|
||||
gsap.set(card, {
|
||||
"--current-card-rotation-offset": 0,
|
||||
});
|
||||
gsap.set(currentInfoEl, {
|
||||
rotateY: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function initCardEvents() {
|
||||
const currentCardEl = cardsContainerEl.querySelector(".current--card");
|
||||
currentCardEl.addEventListener("pointermove", updateCard);
|
||||
currentCardEl.addEventListener("pointerout", (e) => {
|
||||
resetCardTransforms(e);
|
||||
});
|
||||
}
|
||||
|
||||
initCardEvents();
|
||||
|
||||
function removeCardEvents(card) {
|
||||
card.removeEventListener("pointermove", updateCard);
|
||||
}
|
||||
|
||||
function init() {
|
||||
|
||||
let tl = gsap.timeline();
|
||||
|
||||
tl.to(cardsContainerEl.children, {
|
||||
delay: 0.15,
|
||||
duration: 0.5,
|
||||
stagger: {
|
||||
ease: "power4.inOut",
|
||||
from: "right",
|
||||
amount: 0.1,
|
||||
},
|
||||
"--card-translateY-offset": "0%",
|
||||
})
|
||||
.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
|
||||
delay: 0.5,
|
||||
duration: 0.4,
|
||||
stagger: 0.1,
|
||||
opacity: 1,
|
||||
translateY: 0,
|
||||
})
|
||||
.to(
|
||||
[buttons.prev, buttons.next],
|
||||
{
|
||||
duration: 0.4,
|
||||
opacity: 1,
|
||||
pointerEvents: "all",
|
||||
},
|
||||
"-=0.4"
|
||||
);
|
||||
}
|
||||
|
||||
const waitForImages = () => {
|
||||
const images = [...document.querySelectorAll("img")];
|
||||
const totalImages = images.length;
|
||||
let loadedImages = 0;
|
||||
const loaderEl = document.querySelector(".loader span");
|
||||
|
||||
gsap.set(cardsContainerEl.children, {
|
||||
"--card-translateY-offset": "100vh",
|
||||
});
|
||||
gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
|
||||
translateY: "40px",
|
||||
opacity: 0,
|
||||
});
|
||||
gsap.set([buttons.prev, buttons.next], {
|
||||
pointerEvents: "none",
|
||||
opacity: "0",
|
||||
});
|
||||
|
||||
images.forEach((image) => {
|
||||
imagesLoaded(image, (instance) => {
|
||||
if (instance.isComplete) {
|
||||
loadedImages++;
|
||||
let loadProgress = loadedImages / totalImages;
|
||||
|
||||
gsap.to(loaderEl, {
|
||||
duration: 1,
|
||||
scaleX: loadProgress,
|
||||
backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
|
||||
});
|
||||
|
||||
if (totalImages == loadedImages) {
|
||||
gsap.timeline()
|
||||
.to(".loading__wrapper", {
|
||||
duration: 0.8,
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
})
|
||||
.call(() => init());
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
waitForImages();
|
||||
|
||||
</script>
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
|
||||
:root {
|
||||
--card-width: 200px;
|
||||
--card-height: 300px;
|
||||
--card-transition-duration: 800ms;
|
||||
--card-transition-easing: ease;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.787);
|
||||
overflow: hidden;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.app {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.app__bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -5;
|
||||
filter: blur(8px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app__bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.app__bg__image {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
|
||||
width: 180%;
|
||||
height: 180%;
|
||||
transition: transform 1000ms ease, opacity 1000ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app__bg__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.app__bg__image.current--image {
|
||||
opacity: 1;
|
||||
--image-translate-offset: 0;
|
||||
}
|
||||
.app__bg__image.previous--image, .app__bg__image.next--image {
|
||||
opacity: 0;
|
||||
}
|
||||
.app__bg__image.previous--image {
|
||||
--image-translate-offset: -25%;
|
||||
}
|
||||
.app__bg__image.next--image {
|
||||
--image-translate-offset: 25%;
|
||||
}
|
||||
.cardList {
|
||||
position: absolute;
|
||||
width: calc(3 * var(--card-width));
|
||||
height: auto;
|
||||
}
|
||||
.cardList__btn {
|
||||
--btn-size: 35px;
|
||||
width: var(--btn-size);
|
||||
height: var(--btn-size);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100;
|
||||
}
|
||||
.cardList__btn.btn--left {
|
||||
left: -5%;
|
||||
}
|
||||
.cardList__btn.btn--right {
|
||||
right: -5%;
|
||||
}
|
||||
.cardList__btn .icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cardList__btn .icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cardList .cards__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 1000px;
|
||||
}
|
||||
.card {
|
||||
--card-translateY-offset: 100vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) translateX(var(--card-translateX-offset)) translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
|
||||
display: inline-block;
|
||||
width: var(--card-width);
|
||||
height: var(--card-height);
|
||||
transition: transform var(--card-transition-duration) var(--card-transition-easing);
|
||||
user-select: none;
|
||||
}
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
z-index: 1;
|
||||
transition: opacity var(--card-transition-duration) var(--card-transition-easing);
|
||||
opacity: calc(1 - var(--opacity));
|
||||
}
|
||||
.card__image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card__image img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.card.current--card {
|
||||
--current-card-rotation-offset: 0;
|
||||
--card-translateX-offset: 0;
|
||||
--card-rotation-offset: var(--current-card-rotation-offset);
|
||||
--card-scale-offset: 1.2;
|
||||
--opacity: 0.8;
|
||||
}
|
||||
.card.previous--card {
|
||||
--card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
|
||||
--card-rotation-offset: 25deg;
|
||||
}
|
||||
.card.next--card {
|
||||
--card-translateX-offset: calc(var(--card-width) * 1.1);
|
||||
--card-rotation-offset: -25deg;
|
||||
}
|
||||
.card.previous--card, .card.next--card {
|
||||
--card-scale-offset: 0.9;
|
||||
--opacity: 0.4;
|
||||
}
|
||||
.infoList {
|
||||
position: absolute;
|
||||
width: calc(3 * var(--card-width));
|
||||
height: var(--card-height);
|
||||
pointer-events: none;
|
||||
}
|
||||
.infoList .info__wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.info {
|
||||
margin-bottom: calc(var(--card-height) / 8);
|
||||
margin-left: calc(var(--card-width) / 1.5);
|
||||
transform: translateZ(2rem);
|
||||
transition: transform var(--card-transition-duration) var(--card-transition-easing);
|
||||
}
|
||||
.info .text {
|
||||
position: relative;
|
||||
font-family: "Montserrat";
|
||||
font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
width: fit-content;
|
||||
}
|
||||
.info .name, .info .location {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.info .location {
|
||||
font-weight: 800;
|
||||
}
|
||||
.info .location {
|
||||
--mg-left: 40px;
|
||||
--text-size-offset: 0.12;
|
||||
font-weight: 600;
|
||||
margin-left: var(--mg-left);
|
||||
margin-bottom: calc(var(--mg-left) / 2);
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
.info .location::before, .info .location::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
left: 0%;
|
||||
transform: translate(calc(-1 * var(--mg-left)), -50%);
|
||||
}
|
||||
.info .location::before {
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 5px;
|
||||
}
|
||||
.info .location::after {
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
}
|
||||
.info .description {
|
||||
--text-size-offset: 0.065;
|
||||
font-weight: 500;
|
||||
}
|
||||
.info.current--info {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
.info.previous--info, .info.next--info {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.loading__wrapper {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #000;
|
||||
z-index: 200;
|
||||
}
|
||||
.loading__wrapper .loader--text {
|
||||
color: #fff;
|
||||
font-family: "Montserrat";
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
.loading__wrapper .loader {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.loading__wrapper .loader span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f00;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
@media only screen and (min-width: 800px) {
|
||||
:root {
|
||||
--card-width: 250px;
|
||||
--card-height: 400px;
|
||||
}
|
||||
}
|
||||
.support {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.support a {
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
font-size: 1.8rem;
|
||||
backface-visibility: hidden;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.support a:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user