» »

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

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

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

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

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

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

HTML

Код
<div class="terhulopas">
  <div class="tymildosam">  
  <div class="va">ZR</div>
  <div class="va type2">ZR</div>
  <div class="boxes">
  <div class="one kersamirsek">JS</div>
  <div class="two kersamirsek"></div>
  <div class="three kersamirsek">WP</div>
  <div class="four kersamirsek"></div>
  <div class="five kersamirsek">UX</div>
  <div class="six kersamirsek">CSS3</div>  
  </div>
  </div>
  <div class="zodsanum">
  <div class="gusanilam">HTML5</div>
  <div class="gusanilam">CSS3</div>
  <div class="gusanilam">JS</div>
  <div class="gusanilam">WP</div>
  <div class="gusanilam">UX</div>
  </div>
</div>

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.05.2018 Просмотров: 262 Комментарий: (0)

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

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

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