• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Красивый дизайн CSS стрелок с эффектами (Коллекция красивых эффектов для анимационных стрелок на CSS)
Красивый дизайн CSS стрелок с эффектами
Kosten
Вторник, 28 Мая 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Вашему вниманию несколько красивых эффектов в отличной подборке для стрелок, которые идут в оригинальном дизайне. Здесь вы найдете как простой вариант для переключения страниц, так и под анимацией, что смотрятся более стильно от других. Не секрет, что формат под стрелки являются символами, которые были среди нас с периода каменного века. Где по ним всегда происходила координация, это куда пройти, что на интернет ресурсе можно встретить на софт ресурсах, где идет анимационная стрелка, которая указывает на ссылку.

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

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

HTML и CSS примеры анимированных стрелок



HTML

Код
<div class="satedopyved">
  <div class="kasetugts-acvedpomub"></div>
</div>

CSS

Код
.satedopyved {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80px;
  height: 60px;
  cursor: pointer;
}

.kasetugts-acvedpomub {
  position: absolute;
  top: 25px;
  width: 90%;
  height: 10px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  animation: arrow 700ms linear infinite;
}

.kasetugts-acvedpomub::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 10px;
  top: -12px;
  right: -8px;
  background-color: #fff;
  transform: rotate(45deg);
}

.kasetugts-acvedpomub::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 10px;
  top: 12px;
  right: -8px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  transform: rotate(-45deg);
}

JS

Код
const $icon = document.querySelector('.satedopyved');
const $arrow = document.querySelector('.kasetugts-acvedpomub');

$icon.onclick = () => {
  $arrow.animate([
    {left: '0'},
    {left: '10px'},
    {left: '0'}
  ],{
    duration: 700,
    iterations: Infinity
  });
}

На этом все, когда наводите курсор на стрелку, то она начинает двигаться правую и левую сторону.

Демонстрация
Прикрепления: 3322709.png (7.7 Kb) · vrdsam.zip (1.9 Kb)
Страна: (RU)
Kosten
Вторник, 28 Мая 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
CSS Chevron Arrows - это еще один простой дизайн стрелок с эффектами наведения. Эта стрелка разработана и анимирована исключительно с использованием скрипта CSS3. Эффект анимации плавный и чистый, поэтому он легко помещается на любом веб-сайте или в любом приложении.

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



HTML

Код
<a href="#" class="dekipem left"></a>
<a href="#" class="dekipem right"></a>

CSS

Код
.dekipem {
    position: absolute;
    top: 50%;
    width: 3vmin;
    height: 3vmin;
    background: transparent;
    border-top: 1vmin solid white;
    border-right: 1vmin solid white;
    box-shadow: 0 0 0 lightgray;
    transition: all 200ms ease;
    }
    .left {
  left: 0;
  transform: translate3d(0,-50%,0) rotate(-135deg);
    }

    .right {
  right: 0;
  transform: translate3d(0,-50%,0) rotate(45deg);
    }
    
    .dekipem:hover {
  border-color: orange;
  box-shadow: 0.5vmin -0.5vmin 0 white;
    }
    
    .dekipem:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%,-60%) rotate(45deg);
  width: 200%;
  height: 200%;
    }

Вы можете изменить его на нужный вам цвет в зависимости от вашего дизайна. Не только дизайн, но и сценарий кода также поддерживается в чистоте, так что его настройка не займет много времени.

Демонстрация
Прикрепления: 8083758.png (1.9 Kb) · css-chevron-arr.zip (2.2 Kb)
Страна: (RU)
Kosten
Вторник, 28 Мая 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
На веб-сайтах блогов анимированные стрелки пагинации оживят простой дизайн. Кроме того, эффект, используемый в этом дизайне, очень прост, поэтому люди не отвлекаются на него. Гибкие стрелки сжимаются и расширяются плавно, так что пользователь не будет чувствовать никакого отставания.

Так как это общий дизайн, вы можете использовать их как на личных, так и на деловых сайтах. Сделав несколько оптимизаций, вы можете использовать эти стрелки на своих пользовательских сайтах.



HTML

Код
<div class="wrapper">
<div class="triangle up"></div>
</div>
<div class="wrapper">
<div class="triangle right"></div>
</div>
<div class="wrapper">
<div class="triangle down"></div>
</div>
<div class="wrapper">
<div class="triangle left"></div>
</div>

CSS

Код
.wrapper {
  margin-top: 200px;
width: 150px;
  float: left;
}

.triangle {
  
}

.triangle.up {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 50px;
  height: 50px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.triangle.right {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 50px;
  height: 50px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.triangle.down {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 50px;
  height: 50px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-45deg);
}

.triangle.left {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 50px;
  height: 50px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}


Демонстрация
Прикрепления: 3745640.png (3.2 Kb)
Страна: (RU)
Kosten
Вторник, 28 Мая 2019 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Эта анимированная стрела разработана таким универсальным разработчиком. В небольшом пространстве разработчику удалось создать несколько анимаций. При регулярном использовании вам не понадобится такая большая анимация.

Следовательно, вы можете упростить код до желаемого и использовать его на своем веб-сайте или в приложении. Разработчик поделился с вами всей структурой кода, чтобы вы могли редактировать ее в кратчайшие сроки.



Кнопка двойной стрелки

HTML

Код
<div class="center-con">
    <div class="round">
        <div id="cta">
            <span class="arrow primera next "></span>
            <span class="arrow segunda next "></span>
        </div>
    </div>
</div>

CSS


JS

Код
$('.round').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('.arrow').toggleClass('bounceAlpha');
});


Демонстрация
Прикрепления: 5843897.png (2.6 Kb)
Страна: (RU)
Kosten
Вторник, 28 Мая 2019 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Эти стрелки хорошо анимированы, и их можно использовать на любых современных сайтах в современном стиле. Как видно из названия, в этом значке используются стрелки CSS, так что вы можете легко масштабировать их до нужного размера. Вы можете использовать эту стрелку на своих слайд-шоу, на странице галереи изображений и на странице вашего продукта.

Эффект аккуратного наведения четко показывает, что будет делать стрелка, когда пользователь взаимодействует с ней. Простой дизайн стрелки делает ее идеальным вариантом как для веб-сайтов, так и для мобильных приложений. Еще одно преимущество этой анимированной боковой стрелки - она ​​разработана с использованием новейших фреймворков HTML5 и CSS3.

3 стрелки анимация CTA



HTML

Код
<div class="mituds-axzabun">
  <a href="#">ZorNet.Ru — сайт для вебмастера<span class="arrow"><span></span></span></a>
</div>

CSS

Код
.mituds-axzabun {
  margin:0 auto;
  width: 400px;
  height: 100px;
  position: relative;
  top:50%;left:50%;
  margin-left:-200px;
  margin-top:-50px;
}

.mituds-axzabun a {
  position: relative;
  background: #121212;
  bottom: 0;
  color: #fff;
  height: 45px;
  line-height: 45px;
  position: absolute;
  width: 100%;
  padding: 0 0 0 20px;
  font-size: 12px;
  font-weight:700;
  font-family: 'Arial';
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-transform: uppercase;
  transition:0.1s all ease-in;
}
.mituds-axzabun a span{
  display: block;
  width: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
  height: 10px;
  position: absolute;
}

.mituds-axzabun a span span{
  background: url(http://thomaspodgro.com/source/arrow.png);
  display: block;
  width: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  height: 10px;
  opacity: 1;
  position: absolute;
}

.mituds-axzabun a .arrow:before {
  content:"";
  background: url(http://thomaspodgro.com/source/arrow.png);
  display: block;
  width: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
  height: 10px;
  position: absolute;
  opacity: 0.5;
}

.mituds-axzabun a .arrow:after {
  content:"";
  background: url(http://thomaspodgro.com/source/arrow.png);
  display: block;
  width: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
  height: 10px;
  position: absolute;
  opacity: 0.3;
}

.mituds-axzabun a:hover .arrow:before{
  animation: animate-arrow-2 1s ease-in-out infinite 0.1s;
}

.mituds-axzabun a:hover .arrow:after{
  animation: animate-arrow-3 1s ease-in-out infinite 0.2s;
}

.mituds-axzabun a:hover .arrow span{
  animation: animate-arrow-1 1s ease-in-out infinite;
}

@keyframes animate-arrow-1 {
  0%{transform:translateX(-40px);opacity: 0;}
  70%,100%{transform:translateX(0px);opacity: 1;}
}
@keyframes animate-arrow-2 {
  0%{transform:translateX(-20px);opacity: 0;}
  70%,100%{transform:translateX(0px);opacity: 0.5;}
}
@keyframes animate-arrow-3 {
  0%{transform:translateX(-10px);opacity: 0;}
  70%,100%{transform:translateX(0px);opacity: 0.3;}
}


Демонстрация
Прикрепления: 8815563.png (3.7 Kb) · 5573286.png (14.7 Kb)
Страна: (RU)
Kosten
Среда, 29 Мая 2019 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
На веб-сайтах блогов анимированные стрелки оживят простой дизайн. Кроме того, эффект, используемый в этом дизайне, очень прост, поэтому люди не отвлекаются на него. Гибкие стрелки сжимаются и расширяются плавно, так что пользователь не будет чувствовать никакого отставания.

Так как это общий дизайн, вы можете использовать их как на личных, так и на деловых сайтах. Сделав несколько оптимизаций, вы можете использовать эти стрелки на своих пользовательских сайтах.



Простая кнопка CSS-стрелки

HTML

Код
<a href="#" class="desanu-tedsavun">Кнопка</a>

CSS

Код
.desanu-tedsavun{
    color:white;
    padding-top:1.8em;
    display:inline-block;/* or block */
    position:relative;
    border-color:white;
    text-decoration:none;
    transition:all .3s ease-out;
}
.desanu-tedsavun:before{
    content:'▲';
    font-size:.9em;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-.7em;
    border:solid .13em white;
    border-radius:10em;
    width:1.4em;
    height:1.4em;
    line-height:1.3em;
    border-color:inherit;
    transition:transform .5s ease-in;
}
.desanu-tedsavun:hover{
    color:pink;
    border-color:pink;
}
.desanu-tedsavun:hover:before{
    transform: rotate(360deg);
}


Демонстрация
Прикрепления: 5029846.png (5.3 Kb)
Страна: (RU)
Kosten
Среда, 29 Мая 2019 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Простая анимация освещения используется для эффекта наведения. Поскольку стрелка и анимация разработаны исключительно с использованием скрипта CSS3, вы даже можете использовать его в своем существующем проекте. Этот анимированный дизайн стрелок идеально подходит для любых минимальных шаблонов веб-сайтов, особенно шаблонов темных веб-сайтов.



Стрелка SVG

HTML

Код
<button class="arrow left">
  <svg width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
    45.63,75.8 0.375,38.087 45.63,0.375 "/>
  </svg>  
</button>
<button class="arrow right">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
    0.375,0.375 45.63,38.087 0.375,75.8 "/>
  </svg>
</button>

CSS

Код
button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline:0;
}

svg {
  padding: 5px;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -45px;
  margin-left: -35px;
  width: 70px;
  height: 90px;
}

.left {
  left: 42%;
}

.right {
  left: 58%;
}

.left:hover polyline,
.left:focus polyline {
  stroke-width: 3;
}

.left:active polyline {
  stroke-width: 6;
  transition: all 100ms ease-in-out;
}

.right:hover polyline,
.right:focus polyline {
  stroke-width: 3;
}

.right:active polyline {
  stroke-width: 6;
  transition: all 100ms ease-in-out;
}

polyline {
  transition: all 250ms ease-in-out;
}


Демонстрация
Прикрепления: 0474114.png (3.1 Kb)
Страна: (RU)
Kosten
Среда, 29 Мая 2019 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Если вы ищете анимированный дизайн стрелок для аккордеонов или других подобных элементов, этот вдохновит вас. Эту небольшую прыгающую стрелку можно использовать в любой части сайта, например, в меню , разделах часто задаваемых вопросов, во флекс-боксе и во многих других местах.

Поскольку и код сценария, и дизайн просты, этот дизайн стрелок загружается быстрее даже на устройствах с небольшим экраном. Несколько оптимизаций и настроек сделают эту анимированную стрелку идеальной и для мобильных приложений.



HTML

Код
<ul>
  <li><span class="arrow arrow-top"></span></li>
  <li><span class="arrow arrow-right"></span></li>
  <li><span class="arrow arrow-bottom"></span></li>
  <li><span class="arrow arrow-left"></span></li>
  <li><span class="arrow arrow-top-narrow"></span></li>
  <li><span class="arrow arrow-top-wide"></span></li>
</ul>
<uL>
  <li><span class="arrow arrow-top-left"></span></li>
  <li><span class="arrow arrow-top-right"></span></li>
  <li><span class="arrow arrow-bottom-left"></span></li>
  <li><span class="arrow arrow-bottom-right"></span></li>
</ul>

CSS

Код
ul {
  margin: 1.5em 2em 1em;
  text-align: center;
  list-style: none;
}
ul + ul {
  margin-top: -1em;
}
ul li {
  display: inline-block;
  margin: 40px;
}

/* arrow common style */
.arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.arrow-top {
  transform: rotate(-45deg);
}
.arrow-right {
  transform: rotate(45deg);
}
.arrow-bottom {
  transform: rotate(135deg);
}
.arrow-left {
  transform: rotate(-135deg);
}
.arrow-top-narrow {
  transform: rotate(-45deg) skew(-15deg, -15deg);
}
.arrow-top-wide {
  transform: rotate(-45deg) skew(7deg, 7deg);
}
.arrow-top-left {
  transform: rotate(-90deg) skew(-10deg, -10deg);
}
.arrow-top-right {
  transform: rotate(0) skew(-10deg, -10deg);
}
.arrow-bottom-left {
  transform: rotate(180deg) skew(-10deg, -10deg);
}
.arrow-bottom-right {
  transform: rotate(90deg) skew(-10deg, -10deg);
}

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

Демонстрация
Прикрепления: 5314556.png (2.6 Kb)
Страна: (RU)
Kosten
Среда, 29 Мая 2019 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Экспериментируйте с некоторыми хорошими стрелками CSS, сделанными с отдельными элементами div и псевдоэлементами. Эта стрелки разработаны в основном с использованием скрипта CSS, но для более плавного анимационного эффекта.

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



HTML

Код
    <div class="flexwrap">
  
  <div class="arrowed">
   <div class="arrow-1"></div>
  </div>
  
  <div class="arrowed">
   <div class="arrow-2"></div>
  </div>
  
  <div class="arrowed">
   <div class="arrow-3"></div>
  </div>
  
  <div class="arrowed">
   <div class="arrow-4"></div>
  </div>
  
  <div class="arrowed">
   <div class="arrow-5"></div>
  </div>
  
  <div class="arrowed">
   <div class="arrow-6"></div>
  </div>
  
    <div>

CSS

Код
.container {
    max-width: 960px;
    height: 100%;
    margin: 0 auto;
    padding: 20px;
}

.flexwrap {
    display: flex;
    flex-wrap: wrap;
}

/* ------------------- */
/* PEN STYLES      -- */
/* ----------------- */

/* Arrow holder */
.arrowed {
    position: relative;
    height: 200px; width: 200px;
    margin: 0 20px 20px 0;
    border: 1px solid rgba(0,0,0,0.25);
}

/* Just centering the examples */
.arrowed div {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

/* -- ARROW 1      -- */

.arrow-1 {
    height: 15px; width: 15px;
    border: 1px solid tomato;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

/* -- ARROW 2      -- */

.arrow-2 {
    height: 10px; width: 10px;
    border: 1px solid mediumorchid;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
}

.arrow-2:after {
    content: '';
    display: block;
    height: 10px; width: 10px;
    border: 1px solid mediumorchid;
    border-width: 1px 1px 0 0;
    
    /* Parent's rotation also
    rotates transform axis */
    /* Add width of border to Y */
    transform: translate(5px, -6px);
    
    /* rotate handled by parent */
}

/* -- ARROW 3      -- */

.arrow-3 {
    height: 0px; width: 0px;
    border: 8px solid;
    border-color:
  mediumseagreen
  mediumseagreen
  transparent
  transparent;
    transform: rotate(45deg);
}

/* -- ARROW 4      -- */

.arrow-4 {
    /* duplicate the triange */
    position: relative;
    height: 0px; width: 0px;
    border: 8px solid;
    border-color:
  darkorange
  darkorange
  transparent
  transparent;
    transform: rotate(45deg);
}

.arrow-4:before, .arrow-4:after {
    content: '';
    display: block;
    position: absolute;
    
    /* set up more triangles */
    height: 0; width: 0;
    
    /* half the parent border
    rounded up */
    border: 5px solid;    
}

.arrow-4:before {
    border-color:
  darkorange
  transparent
  transparent
  darkorange;
    display: block;
    top: -1px; right: 0px;
    transform-origin: top right;
    transform: rotate(45deg);
}

.arrow-4:after {
    border-color:
  transparent
  darkorange
  darkorange
  transparent;
    top: 0px; right: -1px;
    transform-origin: top right;
    transform: rotate(-45deg);
}

/* -- ARROW 5      -- */

.arrow-5 {
    /* more triangle */
    position: relative;
    height: 0px; width: 0px;
    border: 12px solid;
    border-color:
  darkcyan
  darkcyan
  transparent
  transparent;
    transform: rotate(45deg);
}

.arrow-5:before {
    content: '';
    position: absolute;
    top: 0px; right: 0px;
    display: block;
    height: 12px; width: 16px;
    background-color: darkcyan;
    transform:
  rotate(-45deg)
  translate(2px, 1px);
}

/* -- ARROW 6      -- */

.arrow-6 {
    /* more triangle */
    height: 10px; width: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-width: 3px 3px 0 0;
    transform: rotate(45deg);
}

.arrow-6:before, .arrow-6:after {
    content: '';
    position: absolute;
    display: block;
    height: 10px; width: 10px;
    border-width: 3px 3px 0 0;
}

.arrow-6:before {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-width: 3px 3px 0 0;
    /* top - distance minus border */
    top: 7px; left: -10px;
}

.arrow-6:after {
    border: 1px solid rgba(255, 255, 255, 1);
    border-width: 3px 3px 0 0;
    /* top - distance plus border */
    top: -13px; left: 10px;
}

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

Демонстрация
Прикрепления: 0887204.png (9.7 Kb)
Страна: (RU)
Kosten
Среда, 29 Мая 2019 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Структура кода также проста в этой конструкции стрелки; для создания этой красивой стрелки используется только скрипт CSS-кода. Следовательно, вы можете легко включить тонкий на свой существующий веб-сайт или использовать его в текущем проекте.



HTML

Код
<div class="arrow">
                <span></span>
                <span></span>
                <span></span>
  
</div>

CSS

Код
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


Демонстрация
Прикрепления: 8417586.png (2.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Красивый дизайн CSS стрелок с эффектами (Коллекция красивых эффектов для анимационных стрелок на CSS)
  • Страница 1 из 1
  • 1
Поиск: