ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация движения смайлика на CSS + HTML

Анимация движения смайлика на CSS + HTML

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

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

Так идет вид без прыжка, где можно посмотреть, что присутствует тень под элемент.

В этом виде тень изменена, что видим его в прыжке.

Приступаем к установке:

HTML

Код

CSS

Код

.ngadesponsive {
  background-color: #f39f13;
  background: radial-gradient(ellipse at center, rgb(249, 160, 11) 0%,rgb(247, 157, 6)40%,rgb(115, 74, 7) 100%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: jump 2.3s ease-in-out infinite;
  transform-origin: 50% 100%;
  z-index: 2;
}
.ngadesponsive:before {
  content: '';
  position: absolute;
  top: 38px;
  left: 49%;
  width: 38px;
  height: 5px;
  margin-left: -20px;
  border-left: 6px solid #171616;
  border-right: 6px solid #191818;
  z-index: 3;
}
.ngadesponsive:after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 49%;
  width: 68px;
  height: 48px;
  margin-left: -35px;
  border-bottom: 4px solid #1b1a1a;
  border-radius: 100% 100%;
  z-index: 3;
}

.goingobe-someineb {
  background: radial-gradient(ellipse at center, rgba(2,2,2,1) 1%,rgba(2,3,7,.1) 40%,rgba(1,3,5,0) 45%,rgba(0,0,0,0) 100%);
  width:200px;
  height: 30px;
  animation: shade 2.3s ease-in-out infinite;
  border-radius:100%;
  transform:translateY(-2vh);
  z-index:1;
}

@keyframes jump {
  10% {
  transform: scale(1.2,0.8);
  }
  24%, 26% {
  transform: translateY(-20vh) scale(1,1.001);
  }
  40% {
  transform: translateY(0) scale(1,0.999);
  }
  44% {
  transform: translateY(0) scale(1.05,0.97);
  }
  56% {
  transform: translateY(-6vh) scale(1.01,1);
  }
  70% {
  transform: translateY(0) scale(1,1);
  }
}
@keyframes shade {
  10% {
  transform: translateY(-2vh) scale(1.2,1);
  }
  24%, 26% {
  transform: translateY(-2vh) scale(0.4,0.7);
  }
  40% {
  transform: translateY(-2vh) scale(1,1);
  }
  44% {
  transform: translateY(-2vh) scale(1.08,1);
  }
  56% {
  transform: translateY(-2vh) scale(0.9,1);
  }
  70% {
  transform: translateY(-2vh) scaleX(1,1);
  }
}0% {
  transform: translateY(-2vh) scaleX(1,1);
  }
}

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

Демонстрация

29 Ноября 2018 Просмотров: 1770 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0