Эффект сканирования при наведении на ссылку или элемент

Эффект сканирования при наведении на ссылку или элемент

Эффект сканирования при наведении на ссылку или элемент.
Обзор Обсуждение (14)
baltun

baltun

Администратор
Сообщения
10.894
Реакции
2.594
Баллы
2.003
Пользователь xsasha разместил новый ресурс:

Эффект сканирования при наведении на ссылку или элемент - Эффект сканирования при наведении на ссылку или элемент.

Для того, чтобы эффект работал требуется добавить код ниже в шаблон EXTRA.CSS
PHP: 
.stretch, .downloadButton a:after, .downloadButton a:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}   
.downloadButton a {
  color: #FAF15D;
  font-weight: bold;
  letter-spacing: 0.05em;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 99;
}
.downloadButton a:after {
  -moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;...
Нажмите, чтобы раскрыть...

Узнать больше об этом ресурсе...
 
Подскажите пожалуйста, как применить это эффект для кнопки? Нашел код где находится кнопка а дальше?
 
Чтобы применить эффект требуется знать класс CSS и заменить .downloadButton на свой.
 
upload_2018-1-20_22-22-51.png
Все перепробовал и не получается, помогите самоучки)
 
Кидайте ЛС ссылку на свою страницу тут напишу готовое решение для вас, но смогу посмотреть не раньше понедельника, сейчас только телефон под рукой.
 
Спасибо) Только нет доступа у меня. что бы вам в ЛС написать .
 
В чате напишите я потом все удалю, как сделаю все.
 
Вот так попробуй должно работать все:
PHP: 
.stretch, .inner .estcs-shopping-controlls a:after, .inner .estcs-shopping-controlls a:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.inner .estcs-shopping-controlls a {
  color: #FAF15D;
  font-weight: bold;
  letter-spacing: 0.05em;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 99;
}
.inner .estcs-shopping-controlls a:after {
  -moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  -webkit-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  background: #FAF15D;
  content: "";
  height: 2px;
  opacity: 0;
  z-index: 99;
}
.inner .estcs-shopping-controlls a:before {
  content: "";
  opacity: 0;
}
.inner .estcs-shopping-controlls a:hover {
  -webkit-animation: glitch 750ms infinite;
}
.inner .estcs-shopping-controlls a:hover:before {
  opacity: 1;
}
.inner .estcs-shopping-controlls a:hover:after {
  -webkit-animation: scan 2s infinite;
  opacity: 1;
}

@-webkit-keyframes glitch {
  0% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  5% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
    opacity: 0.75;
  }
  10% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  15% {
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 0.75;
  }
  20% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  45% {
    -moz-transform: skewX(3deg);
    -ms-transform: skewX(3deg);
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 0.75;
  }
  50% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  55% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 0.75;
  }
  60% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  75% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
  }
  80% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  85% {
    -moz-transform: skewX(-8deg);
    -ms-transform: skewX(-8deg);
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg);
    opacity: 0.75;
  }
  90% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}
@-webkit-keyframes scan {
  0% {
    top: 0%;
  }
  50% {
    top: 97%;
  }
  100% {
    top: 0%;
  }
}
 
Попробуй тогда так:
PHP: 
.stretch, .estcs-shopping-controlls a:after, .estcs-shopping-controlls a:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.estcs-shopping-controlls a {
  color: #FAF15D;
  font-weight: bold;
  letter-spacing: 0.05em;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 99;
}
.estcs-shopping-controlls a:after {
  -moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  -webkit-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  background: #FAF15D;
  content: "";
  height: 2px;
  opacity: 0;
  z-index: 99;
}
.estcs-shopping-controlls a:before {
  content: "";
  opacity: 0;
}
.estcs-shopping-controlls a:hover {
  -webkit-animation: glitch 750ms infinite;
}
.estcs-shopping-controlls a:hover:before {
  opacity: 1;
}
.estcs-shopping-controlls a:hover:after {
  -webkit-animation: scan 2s infinite;
  opacity: 1;
}

@-webkit-keyframes glitch {
  0% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  5% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
    opacity: 0.75;
  }
  10% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  15% {
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 0.75;
  }
  20% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  45% {
    -moz-transform: skewX(3deg);
    -ms-transform: skewX(3deg);
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 0.75;
  }
  50% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  55% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 0.75;
  }
  60% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  75% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
  }
  80% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  85% {
    -moz-transform: skewX(-8deg);
    -ms-transform: skewX(-8deg);
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg);
    opacity: 0.75;
  }
  90% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}
@-webkit-keyframes scan {
  0% {
    top: 0%;
  }
  50% {
    top: 97%;
  }
  100% {
    top: 0%;
  }
}
 
xsasha сказал(а):
Попробуй тогда так:
PHP: 
.stretch, .estcs-shopping-controlls a:after, .estcs-shopping-controlls a:before {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.estcs-shopping-controlls a {
  color: #FAF15D;
  font-weight: bold;
  letter-spacing: 0.05em;
  outline: none;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 99;
}
.estcs-shopping-controlls a:after {
  -moz-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  -webkit-box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
  background: #FAF15D;
  content: "";
  height: 2px;
  opacity: 0;
  z-index: 99;
}
.estcs-shopping-controlls a:before {
  content: "";
  opacity: 0;
}
.estcs-shopping-controlls a:hover {
  -webkit-animation: glitch 750ms infinite;
}
.estcs-shopping-controlls a:hover:before {
  opacity: 1;
}
.estcs-shopping-controlls a:hover:after {
  -webkit-animation: scan 2s infinite;
  opacity: 1;
}

@-webkit-keyframes glitch {
  0% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  5% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
    opacity: 0.75;
  }
  10% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  15% {
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 0.75;
  }
  20% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  45% {
    -moz-transform: skewX(3deg);
    -ms-transform: skewX(3deg);
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 0.75;
  }
  50% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  55% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 0.75;
  }
  60% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  75% {
    -moz-transform: skewX(2deg);
    -ms-transform: skewX(2deg);
    -webkit-transform: skewX(2deg);
    transform: skewX(2deg);
  }
  80% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
  85% {
    -moz-transform: skewX(-8deg);
    -ms-transform: skewX(-8deg);
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg);
    opacity: 0.75;
  }
  90% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
    opacity: 1;
  }
  100% {
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}
@-webkit-keyframes scan {
  0% {
    top: 0%;
  }
  50% {
    top: 97%;
  }
  100% {
    top: 0%;
  }
}
Нажмите, чтобы раскрыть...
Спасибо большое! Заработала! Стыдно спросить, что добавить чтобы кнопка была посередине? Я находил в интернете коды, но не работают..
 
makstreid сказал(а):
Стыдно спросить, что добавить чтобы кнопка была посередине?
Нажмите, чтобы раскрыть...
Щас посмотрю код и в этом сообщении напишу ответ. Удали старый фрагмент и вставь вместо него это:
PHP: 
.estcs-shopping-controlls a {
    color: #FAF15D;
    font-weight: bold;
    letter-spacing: 0.05em;
    outline: none;
    overflow: hidden;
    z-index: 99;
    margin: 0 auto;
    text-align: center;
    display: block !important;
}
Последние 3 строки кода отвечают за центрирование блока.
 
Последнее редактирование:
СПАСИБО ОГРОМНОЕ! :russian: Вы принимаете работу на модернизацию форум, по мелочи правка? Ни где не увидел у Вас такой инфы...
 
makstreid сказал(а):
Вы принимаете работу на модернизацию форум, по мелочи правка?
Нажмите, чтобы раскрыть...
У меня не всегда есть время, но когда было раньше я писал приложения (в менеджере ресурсов они в разделе авторские) не сложные конечно и правки конечно могу делать, можете в разделе "Техническая поддержка" задавать вопросы и я буду отвечать вам.
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх Низ