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

Анимации контактной форма письма на CSS

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

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

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

Эффект анимации почтовой открытки

Здесь как можно заметить наведен клик, где сразу срабатывает эффект анимации.

Анимация в письме

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

HTML

Код

CSS

Код

.maketung-departments{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.maketingeam{
  width: 300px;
  height: 200px;
  background: #87bcff;
  position: relative;
  transform-style: preserve-3d;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
}

.maketingeam:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-left: 140px solid Transparent;
  border-right: 150px solid #3792e2;
  border-top: 100px solid Transparent;
  border-bottom: 100px solid #3792e2;
  z-index: 5;
  border-bottom-right-radius: 10px;
}

.maketingeam:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 150px solid #51b9ec;
  border-right: 140px solid Transparent;
  border-top: 100px solid Transparent;
  border-bottom: 100px solid #51b9ec;
  z-index: 4;
  border-bottom-left-radius: 10px;
}

.nimationesta:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 100px solid #87ddff;
  border-bottom: 100px solid transparent;
  z-index: 6;
  transform-origin: top;
  transform: rotateX(0deg);
  transition: all 2s 2s ease;
}

.paneatu-conveg{
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 10px;
  background: #d2cdcd;
  width: 280px;
  height: 180px;
  border-radius: 20px;
  transition: all 1s ease;
}

.paneatu-conveg h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 80px;
  color: #8e969a;
  font-weight: 900;
}

/* hover effect */
.maketingeam:hover .nimationesta:before{
  transform: rotateX(180deg);
  transition: all 2s ease;
}

.maketingeam:hover .paneatu-conveg{
  top: -80px;
  transition: all 1s 1s ease;
}

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

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

01 Декабря 2018 Просмотров: 1515 Комментариев: (0)

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

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

Kosten

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