• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Анимированные темные стрелки в CSS3 (Как сделать анимированные стрелки с помощью CSS)
Анимированные темные стрелки в CSS3
Kosten
Среда, 29 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Анимированные веб-элементы используются как часть веб-дизайна в современных тенденциях веб-дизайна. Стилистика CSS3 предоставляет нам множество опций и функций по умолчанию, поэтому нам не нужно использовать несколько скриптов на одной веб-странице. Эта универсальная функция CSS3 помогает нам создавать привлекательные веб-страницы, не делая их тяжелыми.

Если вы используете анимацию для привлекательной доставки контента пользователям, вам пригодятся анимированные элементы со стрелками, например. Создатель этой анимированной стрелки создал ее, используя только CSS, чтобы вы могли легко использовать их в своем проекте.



HTML

Код
<div id="arrowAnim">
  <div class="arrowSliding">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay1">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay2">
    <div class="arrow"></div>
  </div>
  <div class="arrowSliding delay3">
    <div class="arrow"></div>
  </div>
</div>

CSS

Код
#arrowAnim {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow {
  width: 5vw;
  height: 5vw;
  border: 2.5vw solid;
  border-color: black transparent transparent black;
  transform: rotate(-45deg);
}

.arrowSliding {
  position: absolute;
  -webkit-animation: slide 4s linear infinite;
          animation: slide 4s linear infinite;
}

.delay1 {
  -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.delay2 {
  -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.delay3 {
  -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

@-webkit-keyframes slide {
    0% { opacity:0; transform: translateX(15vw); }    
   20% { opacity:1; transform: translateX(9vw); }    
   80% { opacity:1; transform: translateX(-9vw); }    
  100% { opacity:0; transform: translateX(-15vw); }    
}
@keyframes slide {
    0% { opacity:0; transform: translateX(15vw); }    
   20% { opacity:1; transform: translateX(9vw); }    
   80% { opacity:1; transform: translateX(-9vw); }    
  100% { opacity:0; transform: translateX(-15vw); }    
}


Демонстрация
Прикрепления: 2797565.png (9.4 Kb) · css.zip (1.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Анимированные темные стрелки в CSS3 (Как сделать анимированные стрелки с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: