.row.justify-content-center
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
translate3d
+ transition
=== мыло
{
useTransforms: false,
useCSS: false,
}
например у меня будет лес в форме буквы Т, этого сделать с css grid не получится
<video muted playsinline>
, то просто может не работать. Такое вот оно яблоко.<video muted="true" playsinline="true">
<source type="video/webm" src="video.webm">
<source type="video/mp4" src="video.mp4">
</video>
body {
background: var(--color-background);
}
.main {
display: grid;
gap: 30px;
min-height: 100vh;
grid-auto-rows: auto 1fr auto;
padding: 30px;
}
.header {}
.header__rows {
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 10px;
}
.camera {
display: grid;
justify-items: center;
align-items: center;
}
.pyramid {
display: grid;
justify-content: center;
}
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
justify-content: center;
width: 100%;
height: 32px;
}
.brick {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
background: var(--color-backround-second);
color: var(--color-main);
min-width: 62px;
height: 100%;
}
const items = document.querySelectorAll(".item");
items.forEach(item => {
const hiddenText = item.querySelector(".item__hidden_text");
item.addEventListener("mouseenter", () => {
hiddenText.animate([
{height: 0},
{height: `${hiddenText.scrollHeight}px`}
], {
fill: "forwards",
duration: 300,
});
});
item.addEventListener("mouseleave", () => {
hiddenText.animate([
{height: `${hiddenText.scrollHeight}px`},
{height: 0}
], {
fill: "forwards",
duration: 300,
});
});
});