| Меню сайта |
|
 |
| Категории раздела |
|
|
| Популярное |
|
|
|
| Мини-чат |
|
|
|
| Наш опрос |
Оцените мой сайт
Всего ответов: 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 |
| Просмотров: 165 | Загрузок: 0
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
| Вход на сайт |
|
|
| Поиск |
|
|
| Популярное |
|
|
| Популярное |
|
|
|
|
