3D текст с мультяшным эффектом на CSS

3D текст с мультяшным эффектом на CSS
HTML и CSS 0    108 0
CSS 3D Text Effect

Стильный CSS эффект для текста. Анимация выпрыгивающих вперед слов. Используется мультяшный шрифт "Luckiest Guy".

Скачать архив

Содержание архива:

HTML разметка

"OBNINSKSITE"


CSS оформление

@import "https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap";
#mult_text{background:radial-gradient(circle,#fffc00 0%,#f0ed17 100%);height:100%;display:flex;justify-content:center;align-items:center;font-family:"Luckiest Guy",cursive}
#mult_text h1{margin:0;font-size:8em;padding:0;color:#fff;text-shadow:0 .1em 20px black,.05em -.03em 0 black,.05em .005em 0 black,0 .08em 0 black,.05em .08em 0 black,0 -.03em 0 black,-.03em -.03em 0 black,-.03em .08em 0 black,-.03em 0 0 #000}
#mult_text h1 span{-webkit-transform:scale(0.9);transform:scale(0.9);display:inline-block}
#mult_text 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}
#mult_text 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)}
}

Рекомендую отличный хостинг
Просят от 5 рублей в день
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉
Протестировать (30 дней бесплатно)

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte