Code Ready | Frontend

✅ Shine Animation



На сайте интересно выглядит сияющая анимация, это как луч света - линия, вдоль которой переносится световая энергия. Цвет этой линии зависит от заднего фона, условно говоря, если фон желтый, то и линия будет желтого цвета.



Для создания блестящей анимации вам поможет готовый код ниже: ⤵️

img {

    -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);

    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);

    -webkit-mask-size: 800%;

    mask-size: 800%;

    transition: mask-position 2s ease,-webkit-mask-position 2s ease;

  }

  img:hover {

    -webkit-mask-position: 120%;

    mask-position: 120%;

    opacity: 1;

  }

#обучение #css