<div class="container container--row">
<!--
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=1" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=2" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=3" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=4" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=5" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=6" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=7" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=8" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=9" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
-->
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/400/?random=10" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
</div>
</div>
<div class="container container--column">
<!--
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=1" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=2" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=3" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=4" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=5" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=6" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=7" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=8" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=9" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
-->
<div class="card">
<div class="card__media">
<img src="https://picsum.photos/200/?random=10" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
</div>
</div>
<div class="button__wrapper">
<button id="addCard" class="button">点击我添加卡片</button>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
gap: 30px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr auto;
align-items: start;
}
.button__wrapper {
background-color: rgb(0 0 0 / 0.6);
grid-row: 2 / 3;
grid-column: 1 / -1;
padding: 10px 0 30px;
display: flex;
justify-content: center;
align-items: center;
}
.button {
--text: #382b22;
--light-pink: #fff0f0;
--pink: #ffe9e9;
--dark-pink: #f9c4d2;
--pink-border: #b18597;
--pink-shadow: #ffe3e2;
position: relative;
display: inline-flex;
cursor: pointer;
outline: none;
font-size: inherit;
font-family: inherit;
justify-content: center;
align-items: center;
font-weight: 600;
color: var(--text);
padding: 1.25em 2em;
background: var(--light-pink);
border: 2px solid var(--pink-border);
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
background 150ms cubic-bezier(0, 0, 0.58, 1);
}
.button::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--dark-pink);
border-radius: inherit;
box-shadow: 0 0 0 2px var(--pink-border), 0 0.425em 0 0 var(--pink-shadow);
transform: translate3d(0, 0.475em, -0.25em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
.button:hover {
background: var(--pink);
transform: translate(0, 0.25em);
}
.button:hover::before {
box-shadow: 0 0 0 2px var(--pink-border), 0 0.5em 0 0 var(--pink-shadow);
transform: translate3d(0, 0.5em, -1em);
}
.button:active {
background: var(--pink);
transform: translate(0em, 0.75em);
}
.button:active::before {
box-shadow: 0 0 0 2px var(--pink-border), 0 0 var(--pink-shadow);
transform: translate3d(0, 0, -1em);
}
.container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
border-radius: 10px;
background-color: #444444;
}
.container::-webkit-scrollbar {
background-color: #557;
}
.container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d62929;
background-image: linear-gradient(
90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent
);
}
.container--row::-webkit-scrollbar {
height: 4px;
margin: 2px;
}
.container--column::-webkit-scrollbar {
width: 4px;
margin: 2px;
}
.container {
padding: 10px;
border: 1px dashed #f36;
display: flex;
gap: 10px;
display: flex;
counter-reset: item;
width: 40vw;
transform: translateZ(0);
margin: 30px;
}
.container--row {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding: 10px;
}
.container--column {
flex-direction: column;
height: 340px;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
scroll-padding: 10px;
}
.card {
display: flex;
flex-direction: column;
background: linear-gradient(#f8f8f8, #fff);
box-shadow: 0 8px 16px -8px rgb(0 0 0 / 40%);
gap: 20px;
border-radius: 12px;
position: relative;
color: #333;
scroll-snap-align: start;
scroll-snap-stop: always;
counter-increment: item;
}
.card::before {
content: counter(item);
position: absolute;
z-index: 4;
display: inline-flex;
padding: 10px 20px 10px 15px;
top: 1.25em;
left: 0;
color: #fff;
background-color: #09f;
align-items: center;
border-radius: 0 10rem 10rem 0;
font-size: 1rem;
text-shadow: 1px 1px 1px rgb(0 0 0 / 0.5);
}
.card__media {
display: flex;
justify-content: center;
align-items: center;
}
.card img {
object-fit: cover;
object-position: center;
display: block;
}
.container--row .card {
width: 200px;
gap: 10px;
}
.container--row img {
border-radius: 12px 12px 0 0;
max-width: 100%;
height: auto;
}
.container--row .card__title {
padding: 0 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.5rem;
font-weight: 700;
}
.container--row .card__action {
display: flex;
margin: 0 10px 16px;
background: #09f;
padding: 10px;
color: #fff;
justify-content: center;
align-items: center;
border-radius: 6px;
min-height: 48px;
}
.container--column .card {
flex-direction: row;
align-items: center;
}
.container--column .card__media {
border-radius: 12px 0 0 12px;
height: 120px;
}
.container--column img {
border-radius: 12px 0 0 12px;
max-height: 100%;
width: auto;
}
.container--column .card__title {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.5rem;
font-weight: 700;
flex: 1 1 0%;
}
.container--column .card__action {
width: 3.25em;
aspect-ratio: 1;
background-image: linear-gradient(to bottom, #0068ff91, #0068ff91),
url(http://www.w3cplus.com/sites/default/files/blogs/2022/2201/love.svg),
linear-gradient(to bottom, #ff00001f, #ff00001f);
background-repeat: no-repeat;
background-position: center;
background-size: cover, 1.5em 1.5em, cover;
border-radius: 50%;
margin-right: 16px;
background-blend-mode: multiply;
}
.container {
/* justify-content: flex-end; */
}
.container .card {
flex: none;
}
.container--row .card:first-child {
margin-left: auto;
}
.container--column .card:first-child {
margin-top: auto;
}
function createCard(targetElement, innerHTMLContent) {
const newCard = document.createElement("div");
newCard.setAttribute("class", "card");
newCard.innerHTML = innerHTMLContent;
targetElement.appendChild(newCard);
}
const addButton = document.getElementById("addCard");
const container = document.querySelectorAll(".container");
addButton.addEventListener("click", () => {
container.forEach((item, index) => {
console.log(index);
if (index === 0) {
let eleInnerHTML = `
<div class="card__media">
<img src="https://picsum.photos/400/?random" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action">Button</div>
`;
createCard(item, eleInnerHTML);
} else if (index === 1) {
let eleInnerHTML = `
<div class="card__media">
<img src="https://picsum.photos/400/?random" alt="">
</div>
<h3 class="card__title">Card Title</h3>
<div class="card__action"></div>
`;
createCard(item, eleInnerHTML);
} else {
console.log(item, index);
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.