WE @htmlcssjavas
Showing posts older than #947 · Back to latest
Forwarded from Javascript
Forwarded from Frontend Hash
:hover с помощью позиционирования анкоров CSS, :has и без JS 🔥. article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}
ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}
p { --from: 0 100%; --to: 0 -100%; }
.tile { --to: 0 -150%; }
@keyframes move {
0% { translate: var(--from); }
100% { translate: var(--to); }
}
p, .tile {
animation: move;
animation-timeline: --section;
animation-range: entry 20% 120%;
}
<div> и несколько строк CSS-кода. Стоит отметить, что наши индикаторы будут настраиваемыми: вы запросто сможете создать множество их вариаций на основе одного и того же кода.color-mix() или синтаксис относительных цветов, мы можем динамически изменять прозрачность любого цвета.
@ keyframes fade {
to { opacity: 0; filter: blur(2rem); }
}
h2 {
animation: fade;
animation-timeline: view();
animation-range: cover 40% cover 85%;
}@ keyframes unclip {
to { clip-path: ellipse(220% 200% at 50% 175%); }
}.content {
clip-path: ellipse(220% 200% at 50% 300%);
animation: unclip both linear;
animation-timeline: --article;
animation-range: entry;
}@ keyframes scale-down {
0% { scale: 5; }
}
img {
animation: scale-down;
animation-timeline: --article;
animation-range: entry;
}
withDataAtom, withStatusesAtom, withRetry, withCache.
