ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная чашка кофе Loader на CSS

Анимированная чашка кофе Loader на CSS

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

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

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

HTML

Код

CSS

Код

@keyframes wave {
  0% {opacity: 0; transform: translateY(15px)}
  50% {opacity: 1; transform: translateY(0)}
  100% {opacity: 0; transform: translateY(-15px)}
}
.satenades-ksazarovag ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  width: 60px;
  text-align: center;
  animation: wave 2.5s infinite linear;
  animation-fill-mode: forwards;
}
.satenades-ksazarovag li {
  display: inline-block;
  background: #f7edd3;
  height: 28px;
  width: 8px;
  border-radius: 0 100%;
  transform: rotate(12deg);
}
.damimun-kection {
  background: #ecdca8;
  width: 60px;
  height: 54px;
  border-radius: 0 0 100% 100%;
  position: relative;
}
.damimun-kection:before {
  content: "";
  position: absolute;
  width: 67px;
  height: 19px;
  border-radius: 100%;
  background: inherit;
  left: -3px;
  top: -10px;
}
.damimun-kection:after {
  content: "";
  position: absolute;
  width: 57px;
  height: 11px;
  border-radius: 50%;
  background: #382c24;
  left: 2px;
  top: -6px;
}
.satenades-ksazarovag span {
  background: #F2E3B4;
  width: 12px;
  height: 18px;
  position: absolute;
  right: -12px;
  top: 10px;
  border-radius: 0 100% 100% 0;
}
.satenades-ksazarovag span:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  background: #b57323;
  width: 9px;
  height: 12px;
  border-radius: 0 50% 50% 0;
}
.satenades-ksazarovag span:after {
  content: "";
  position: absolute;
  top: 38px;
  left: -49px;
  background: #f3e1ac;
  width: 39px;
  height: 8px;
  border-radius: 100%;
}

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

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

25 Декабря 2018 Загрузок: 2 Просмотров: 1252 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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