Как правильно прописать стили анимации блика в блоке с абсолютным позиционированием?
У меня есть блок, спозиционированный абсолютно.
По сути это кнопка для загрузки файла.
У меня блик почему-то выходит за пределы обоих обёрток, несмотря на то, что в свойствах обеих я прописываю overflow: hidden;
Вот я тут набросал https://codepen.io/vlad-tarasoffka/pen/ExMzbBx
Что я делаю не так?
Дополнительно:
Ничего у вас не выходит за их пределы.
Блоки квадратные, в их области и видна полоска.
И не нужны две обертки
А почему не нужно 2 две обёртки? А как вы спозиционируете кнопку с позишн релатив в блоке тоже с позишн релатив? Если убрать последнюю внешнюю обёртку и сделать кнопку абсолютной, но блик будет выходить за края, так как оба блока абсолютные.
А как вы спозиционируете кнопку с позишн релатив в блоке тоже с позишн релатив?
Никто же вас не заставлял так писать.
В вашем сценарии: ссылка абсолютом, полоска-псевдо в ней тоже абсолютом. Всё.
Но вообще проще гридами, как-то так.
https://codepen.io/AnnaSummer/pen/NWJVygG
Осталось выяснить зачем в разметке нужны left и right.
Если в них нет полезного содержимого, то замените на псевдо.
Никто же вас не заставлял так писать.
В вашем сценарии: ссылка абсолютом, полоска-псевдо в ней тоже абсолютом. Всё.
Если не делать обёртки, а обойтись только тегом <a />, то псевдо-блик будет выходить за рамки основного тега.
Но вообще проще гридами, как-то так.
https://codepen.io/AnnaSummer/pen/NWJVygG
Гриды использую редко, когда без них уж совсем никак. Они вызывают у меня боль, потому что постоянно приходится освежать их в голове ))
Если не делать обёртки, а обойтись только тегом , то псевдо-блик будет выходить за рамки основного тега.
У меня сейчас выходит?
Если нужно, чтобы блик проходил и по синей границе, то замените border на внутреннюю тень или градиент.
Можете просто из всей разметки оставить только ссылку и проверить, что у неё всё хорошо.
Ну а потом уже позиционировать её куда угодно и как угодно.
они и ограничены, квадратом, которым является и фигура центральной нахлобучки
добавление border-radius: 50%; в нужную фигуру должно помочь
- Да, так и есть. Я тупанул жёстко )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания стиля анимации блика в блоке с абсолютным позиционированием вам понадобится использовать ключевые кадры (keyframes) в CSS. Ниже приведен пример кода на языке CSS, который позволит вам создать анимацию блика в блоке с абсолютным позиционированием:
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .block { position: absolute; width: 100px; height: 100px; background-color: #f00; animation: blink 1s infinite; }
В данном примере мы создаем анимацию с названием "blink", которая будет изменять прозрачность блока от 1 до 0.5 и обратно. Затем мы применяем эту анимацию к блоку с классом "block", который имеет абсолютное позиционирование.
Вы можете настроить параметры анимации (например, продолжительность, задержку, тип анимации и другие) с помощью свойств CSS, таких как animation-duration, animation-delay, animation-timing-function и других.
Таким образом, вы сможете создать стиль анимации блика в блоке с абсолютным позиционированием, используя CSS и ключевые кадры.