CSS-анимация возвращает z-индекс?
У меня есть один элемент div с псевдо-элементом ::before, который имеет z-index: -1, чтобы его можно было поместить за фактическим элементом div. Элемент div — это «шар», а псевдоэлемент — его тень.
Еще есть кнопка и при нажатии на div накладывается анимация, чтобы она подпрыгивала вверх-вниз. Проблема в том, что тень (псевдодив) - при включенной анимации и только потом - ставится перед мячом (настоящим div).
document.querySelector("button").addEventListener("click", () => {
document.body.classList.toggle("disable-animation");
})*,
*::before,
*::after {
position: relative;
min-width: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
*::before,
*::after {
content: '';
position: absolute;
}
body {
min-height: 100vh;
background-color: rgba(0,0,0,.2);
display: grid;
place-items: center;
}
div[ball] {
width: 10vw;
aspect-ratio: 1;
background-color: #fff;
border-radius: 50%;
--jump: 4vw;
animation: var(--animation);
animation-timing-function: ease-in-out;
}
div[ball]::before {
width: 100%;
height: 15%;
bottom: -.5vw;
background-color: rgba(0,0,0,.1);
border-radius: 50%;
z-index: -1;
--jump: -4vw;
animation: var(--animation);
animation-timing-function: ease-in-out;
}
@keyframes ball-jump {
50% {
transform: translate3d(0, calc(-1 * var(--jump)), 0);
}
}
.disable-animation {
--animation: ball-jump 1s infinite;
}<div ball></div>
<button>Toggle animation</button>Я пробовал этот пример в Firefox 123, Google Chrome 122.0.6261.95 и Microsoft Edge 121.0.2277.128. Поскольку Firefox и другие браузеры не используют общий движок рендеринга, я предполагаю, что это не ошибка, а то, что я делаю что-то не так. Просто не знаю что?
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
69
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Используйте оба псевдоэлемента для создания анимации. Это устранит проблему с z-индексом и позволит избежать необходимости использовать другую анимацию, чтобы вернуть ту, которая была применена к основному элементу.
document.querySelector("button").addEventListener("click", () => {
document.body.classList.toggle("disable-animation");
})body {
margin: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.2);
display: grid;
place-items: center;
}
div[ball] {
width: 10vw;
aspect-ratio: 1;
position: relative;
}
div[ball]::before {
content:"";
position: absolute;
width: 100%;
height: 15%;
bottom: -.5vw;
background-color: rgba(0,0,0,.1);
border-radius: 50%;
}
div[ball]::after {
content:"";
position: absolute;
inset: 0;
background-color: #fff;
border-radius: 50%;
--jump: 4vw;
animation: var(--animation);
animation-timing-function: ease-in-out;
}
@keyframes ball-jump {
50% {
transform: translate3d(0, calc(-1 * var(--jump)), 0);
}
}
.disable-animation {
--animation: ball-jump 1s infinite;
}<div ball></div>
<button>Toggle animation</button>Другие вопросы по теме
Цвет фона метки с атрибутом for только при установленном флажке CSS
Измените стиль активной кнопки в разбиении на страницы таблиц данных
Как сохранить панель навигации вверху страницы, но не видеть ее на экране при прокрутке вниз?
Как объявить шрифты с использованием стилизованных компонентов MUI?
Как медленно изменить цвет градиента при наведении курсора?
Цвет обводки SVG не изменится
Добавляете тему Angular Material в проекты Stackblitz с Angular 17?
Как сделать так, чтобы липкий элемент появлялся позади другого элемента?
Как убрать синий квадрат, который появляется при нажатии кнопки на маленьких экранах?
Невозможно изменить стиль CSS после изменения класса CSS с помощью React
Похожие вопросы
Как сохранить панель навигации вверху страницы, но не видеть ее на экране при прокрутке вниз?
Как отключить элемент ввода на основе определенного условия в Angular?
Как запустить один и тот же скрипт несколько раз на одной странице?
Как убрать синий квадрат, который появляется при нажатии кнопки на маленьких экранах?
Как отключить автозаполнение для ввода в html?
Как я могу отображать динамическое всплывающее окно с содержимым по значению «Копировать»?
Универсальный загружаемый HTML-файл, включаяchart.js, из приложения nuxt
Цвета CSS не загружены, и проблема с тем, чтобы сделать div видимым и невидимым
.disabled у меня не работает при попытке отключить кнопку
Как объединить несколько p-тегов, содержащих многострочный текст (рядом) в CSS?
Спасибо @Temani Afif. Не знаю, почему я не подумал использовать
::beforeи::afterдля шара и тени.