Подробное описание и демонстрация работы блока «Эффекты для текста» для сайта под номером №31 для библиотеки Bootstrap. Html и CSS код для текстовых эффектов на сайте как на изображении.
F
o
k
i
t
.
R
u
<div class="demo"> <div class="text-effect"> <span data-title="B">B</span> <span data-title="e">e</span> <span data-title="s">s</span> <span data-title="t">t</span> <span data-title="j">j</span> <span data-title="Q">Q</span> <span data-title="u">u</span> <span data-title="e">e</span> <span data-title="r">r</span> <span data-title="y">y</span> </div> </div>
.text-effect{ color: transparent; font-family: 'Noto Serif', serif; font-size: 100px; font-weight: 700; text-align: center; margin: 10px auto; display: block; overflow: hidden; position: relative; } .text-effect span{ display: inline-block; transform-style: preserve-3d; position: relative; } .text-effect span:before, .text-effect span:after{ content: attr(data-title); color: rgba(0,0,0,0.2); transform-origin: left top; transform: scale(1.1, 1) skew(0deg, 20deg); position: absolute; top: 0; left: -1px; animation: animate 0.8s alternate infinite; } .text-effect span:after{ color: #684da3; text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8); transform: rotateY(-50deg); z-index: 2; animation: animate 0.8s alternate infinite; } @keyframes animate{ 100%{ transform: scale(1.1, 1) skew(0deg, 5deg); transform: rotateY(-10deg); } } @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: 33px; } }