Стильный CSS эффект для текста. Анимация выпрыгивающих вперед слов. Используется мультяшный шрифт «Luckiest Guy».
HTML разметка
<h1><span>"OBNINSK</span><span style="color:#ff0000">SITE"</span></h1>
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)}
}