я задал для кнопки свойство overflow: hidden, чтобы блик на кнопке не выходил за границы, но блик почему-то частично остаётся, на мобилках особ айфон

Рейтинг: 0Ответов: 0Опубликовано: 22.02.2023

.btn {
  position: relative;
  display: flex;
  overflow: hidden;
  background-color: black;
  border: 0.2rem solid #F8E31A;
  border-radius: 3rem;
  color: #F8E31A;
  width: 23rem;
  height: 6rem;
  text-decoration: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-family: sans-serif;
  letter-spacing: .3rem;
  animation-name: departure;
  animation-duration: 2s;
  animation-delay: 6s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  transition: all;
}

.btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  transform: translateX(-5rem) skewX(-45deg);
}

.right-wraper__btn:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.6);
  transform: translateX(-7rem) skewX(-45deg);
  animation-name: ligh;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
  transition: all;
}

.btn:hover:before {
  animation-name: ligh-touch;
  animation-duration: 0.5s;
  animation-timing-function: ease linear;
  backface-visibility: hidden;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  transition: all;
}

@keyframes ligh {
  0% {
    transform: translateX(-7rem) skewX(-45deg);
  }
  20% {
    transform: translateX(30rem) skewX(-45deg);
  }
  100% {
    transform: translateX(30rem) skewX(-45deg);
  }
}

@keyframes ligh-touch {
  from {
    transform: translateX(-7rem) skewX(-45deg);
  }
  to {
    transform: translateX(30rem) skewX(-45deg);
  }
}
<button class="right-wraper__btn btn"></button>

можете посмотреть с телефона

Ответы

Ответов пока нет.