ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный логотип сайта на основе CSS3

Анимированный логотип сайта на основе CSS3

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

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

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

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

HTML

Код

CSS

Код

.terhulopas { background:url(http://zornet.ru/ABVUN/logo_volkanaltinbas_3d.gif)
  0 no-repeat;
  cursor:pointer;
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-100px;
}

.tymildosam {
  font-size:14px;
  line-height:40px;
  position:absolute;
  top:70px;
  left:140px;
  height:40px;
  width:40px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin:50%;
  -webkit-animation-name: ciycle;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 6s;
}

.boxes {
  position:absolute;
  top:0;
  left:0;
  -webkit-transition: all 1s ease-in-out;
}

.va {
  background:black;
  color:#fff;
  border-radius:50px;
  position:absolute;
  top:-50px;
  left:0;
  height:40px;
  width:40px;
  text-align:center;
  -webkit-box-shadow: rgba(0,0,0,0.08) 1px 1px 2px 3px;
  -webkit-transition:all 0.8s ease-in-out;
  -webkit-animation-name: ciycle2;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1.4s;
}

.va.type2 {
  -webkit-transform:rotateY(180deg) translateZ(1px);
  -webkit-animation-name: ciycle3;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1.4s;
}

.zodsanum {
  position:absolute;
  top:85px;
  left:150px;
  text-align:center;
  line-height:40px;
  height:50px;
  width:50px;
  opacity:0;
  -webkit-transition: all .5s ease-out;
  -webkit-transition-delay: 0.30s;
}

.gusanilam {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -webkit-animation-name: gusanilam;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 2.5s;
}

.gusanilam:nth-child(1) {
  -webkit-animation-delay:0;
}

.gusanilam:nth-child(2) {
  -webkit-animation-delay:.5s;
}

.gusanilam:nth-child(3) {
  -webkit-animation-delay:1s;
}

.gusanilam:nth-child(4) {
  -webkit-animation-delay:1.5s;
}

.gusanilam:nth-child(5) {
  -webkit-animation-delay:2s;
}

.smile {
  -webkit-transition: all .6s ease-out;
}

.one,
.two,
.three,
.four,
.five,
.six{
  border-radius:2px;
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:40px;
  opacity:0.50;
  line-height:40px;
  text-align:center;
  color:#fff;
  -webkit-transition: all 1s ease-in-out;
}

.one {
  background:black;
  -webkit-transform:translateZ(20px);
}

.two {
  background:red;
  -webkit-transform: rotateX(90deg) translateY(0) translateZ(-20px);
}

.three {
  background:blue;
  -webkit-transform: translateY(0) translateZ(-20px);
}
.four {
  background:green;
  -webkit-transform: rotateX(90deg) translateY(0) translateZ(20px);
}
.five {
  background:darkblue;
  -webkit-transform: rotateY(-90deg) translateX(0) translateY(0) translateZ(20px);
}
.six {
  background:purple;
  -webkit-transform: rotateY(90deg) translateX(0) translateZ(20px) translateY(0);
}

.terhulopas:hover .kersamirsek {
  background:gray;
  opacity:0.25;
}
.terhulopas:hover .one{
  -webkit-transform: rotateX(90deg) translateZ(20px) translateY(40px);
  -webkit-transform-origin: 100%;
}
.terhulopas:hover .two{
  -webkit-transform: rotateX(90deg) translateY(0) translateZ(20px);
opacity:1;
}
.lterhulopas:hover .three {
  -webkit-transform: rotateX(-90deg) translateY(40px) translateZ(-20px);
}
.terhulopas:hover .five {
  -webkit-transform: rotateZ(90deg) rotateY(-90deg) translateX(0) translateY(40px) translateZ(20px);
}
.terhulopas:hover .six{
  -webkit-transform: rotateY(90deg) translateX(20px) translateZ(20px) translateY(-20px) rotateX(90deg);
  -webkit-transform-origin: 100%;
}

.terhulopas:hover .boxes {
  top:40px;
}

.terhulopas:hover .va {
  top:-75px;
}
.terhulopas:hover .zodsanum {
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin:50%;
  -webkit-transform: rotateX(-200deg) rotateY(-180deg) rotateZ(-180deg);
  left:150px;
  top:80px;
  opacity:1;
}

@-webkit-keyframes ciycle {
  from {
  -webkit-transform: rotateX(-25deg) rotateY(0deg);
  }
  to {
  -webkit-transform: rotateX(-25deg) rotateY(360deg);
  }
}

@-webkit-keyframes ciycle2 {
  from {
  -webkit-transform: rotateY(0deg);
  }
  to {
  -webkit-transform: rotateY(-360deg);
  }
}

@-webkit-keyframes ciycle3 {
  from {
  -webkit-transform:rotateY(180deg) translateZ(1px);
  }
  to {
  -webkit-transform:rotateY(-180deg) translateZ(1px);
  }
}

@-webkit-keyframes gusanilam {
  0%{
  opacity:1;
  }
  100% {
  opacity:0;
  top:-55px;
  }
}

Как видим, что тематика про рыбалку, что меняем изображение, так как оно под ссылкой идет.

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

08 Мая 2018 Просмотров: 1665 Комментариев: (1)

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 05 Июля 2018 19:40¹ 0 Этот логотип можно через информер вывести, чтоб только оператор вверх сайта поставить?