Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №24 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
Fokit.ru
<div class="demo"> <div class="text-effect" data-tip="Best jQuery"> <span>Best jQuery</span> </div> </div>
.demo{ background: linear-gradient(to right,#1e130c,#9a8478); } .text-effect{ color: #fff; font-family: 'Acme', sans-serif; font-size: 100px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 0.15em #7a040c; margin: 50px auto 0; white-space: nowrap; filter: blur(0.007em); position: relative; z-index: 1; animation: shake 2.5s linear infinite; } .text-effect:before, .text-effect:after{ content: attr(data-tip); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; animation: animate1 2.5s linear infinite; -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%); clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%); } .text-effect:after{ animation: animate2 2.5s linear infinite; -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%); clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%); } .text-effect span{ transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%); clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%); } @keyframes shake{ 5%, 15%, 25%, 35%, 55%, 65%, 75%, 95%{ transform: translateY(0.018em) rotate(0deg); filter: blur(0.018em); } 10%, 30%, 40%, 50%, 70%, 80%, 90%{ transform: translateY(-0.018em) rotate(0deg); filter: blur(0.01em); } 20%, 60%{ transform: translate(-0.018em, 0.018em) rotate(0deg); filter: blur(0.03em); } 45%, 85%{ transform: translate(0.018em, -0.018em) rotate(0deg); filter: blur(0.03em); } 100%{ transform: translate(0) rotate(-0.5deg); filter: blur(0.007em); } } @keyframes animate1{ 0%, 95%{ transform: translate(-50%, -50%); } 100%{ transform: translate(-51%, -45%); } } @keyframes animate2{ 0%, 95%{ transform: translate(-50%, -50%); } 100%{ transform: translate(-49%, -55%); } } @media only screen and (max-width: 990px){ .text-effect{ font-size: 80px; } } @media only screen and (max-width: 767px){ .text-effect{ font-size: 55px; } } @media only screen and (max-width: 479px){ .text-effect{ font-size: 40px; } } @media only screen and (max-width: 359px){ .text-effect{ font-size: 35px; } }