• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
SVG оформление ошибки 404

Разработка SVG оформление ошибки 404

Нет прав для скачивания
SVG оформление ошибки 404.
Разметку писать не будет, в SVG слишком большой код, перейдем сразу к стилю:
CSS:
body
{
  background-color:#141019;
  background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed;
}


#handboy
{
   animation: swing ease-in-out 1.3s infinite alternate;
    transform-origin: 98% 98%;
    transform-box: fill-box;
    
}


#girllight
{
   animation: swing ease-in-out 1.3s infinite alternate;
    transform-origin: 0% 97%;
    transform-box: fill-box;
}

#hairgirl
{
    animation: swinghair ease-in-out 1.3s infinite alternate;
   transform-origin: 60% 0%;
    transform-box: fill-box;
 
}

#zero
{
  transform-origin:bottom;
  transform-box:fill-box;
 
}

/*************swing************/
@keyframes swing {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}


/*************swing hair************/
@keyframes swinghair {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}
Дополним JS:
JavaScript:
anime({
  targets: '.row svg',
  translateY: 10,
  autoplay: true,
  loop: true,
  easing: 'easeInOutSine',
  direction: 'alternate'
});

anime({
  targets: '#zero',
  translateX: 10,
  autoplay: true,
  loop: true,
  easing: 'easeInOutSine',
  direction: 'alternate',
  scale: [{value: 1}, {value: 1.4}, {value: 1, delay: 250}],
    rotateY: {value: '+=180', delay: 200},
});
Посмотрим наш итог:
dr29.gif
  • Мне нравится
Реакции: Роман_Тютин
Автор
baltun
Скачиваний
0
Просмотры
484
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ