Скачать для фотошопа и для создания сайта Среда, 24.07.2024, 05:28
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


3D текст с анимационным эффектом CSS
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
12.11.2020, 21:31


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

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

Так получится после установочного процесса:



Установка:

HTML

Код
<section id="stroyeniye-tekstura">
  <h1>
  <span>ZorNet.</span>
  <span style="color:#fb0a0a">Ru</span>
  </h1>
</section>


CSS

Код
@import "https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap";

#stroyeniye-tekstura {
  background: radial-gradient(circle, #fffc00 0%, #f0ed17 100%);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Luckiest Guy", cursive
}

#stroyeniye-tekstura h1 {
  margin: 0;
  font-size: 10em;
  padding: 0;
  color: #f7f5f5;
  text-shadow: 0 0.1em 20px #131212, 0.05em -0.03em 0 #0c0c0c, 0.05em 0.005em 0 #131212, 0 0.08em 0 #0e0e0e, 0.05em 0.08em 0 #080808, 0 -0.03em 0 #0e0e0e, -0.03em -0.03em 0 #0e0e0e, -0.03em 0.08em 0 #0a0a0a, -0.03em 0 0 #0a0a0a;
}

#stroyeniye-tekstura h1 span {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  display: inline-block
}

#stroyeniye-tekstura h1 span:first-child {
  -webkit-animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate
}

#stroyeniye-tekstura h1 span:last-child {
  -webkit-animation: bopB 1s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
  animation: bopB 1s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate
}

@-webkit-keyframes bop {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  50%,
  100% {
  -webkit-transform: scale(1);
  transform: scale(1)
  }
}

@keyframes bop {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  50%,
  100% {
  -webkit-transform: scale(1);
  transform: scale(1)
  }
}

@-webkit-keyframes bopB {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  80%,
  100% {
  -webkit-transform: scale(1) rotateZ(-3deg);
  transform: scale(1) rotateZ(-3deg)
  }
}

@keyframes bopB {
  0% {
  -webkit-transform: scale(0.9);
  transform: scale(0.9)
  }

  80%,
  100% {
  -webkit-transform: scale(1) rotateZ(-3deg);
  transform: scale(1) rotateZ(-3deg)
  }


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

Демонстрация
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 146 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024