Анимированный блик на кнопку

Пример анимации блика на кнопку при помощи HTML и CSS.

HTML

<div class="container-header__button">
	<a class="container-header__button-link button-blick" href="/avtomaticheskij-podbor-skupki">Автоматический подбор скупки <span class="flare"></span></a>
</div>

CSS

.container-header__button {
	padding: 8px 0;
    overflow: hidden;}
.button-blick {
	position: relative;
    overflow-x: hidden;}
.button-blick span.flare {
    position: absolute;
    top: 0;
    height: 100%;
    width: 45px;
    transform: skewX(-45deg); // Наклон
    animation: flareAnimation;
    left: -150%;
    background: linear-gradient(90deg, rgb(0 0 0 / 12%), rgba(255, 255, 255, 0.4));
    animation: flareAnimation 3s infinite linear; // Время и тип анимации можно менять}
@keyframes flareAnimation {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
	}}

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены