მოძრავი ასოების ეფექტი მიღწეულია მხოლოდ CSS-ის და SVG (Scalable Vector Graphics) ტაგის გამოყენებით!

CSS კოდი

HTML, BODY { height: 100%;}

BODY { background: #082330;  background-size: .12em 100%; font: 16em/1 Arial;}
.text--line { font-size: .5em;}
svg { position: absolute; width: 100%; height: 100%;}
.text-copy { fill: none; stroke: white; stroke-dasharray: 7% 28%; stroke-width: 3px; -webkit-animation: stroke-offset 9s infinite linear; animation: stroke-offset 9s infinite linear;}
.text-copy:nth-child(1) { stroke: #360745; stroke-dashoffset: 7%;}
.text-copy:nth-child(2) { stroke: #D61C59; stroke-dashoffset: 14%;}
.text-copy:nth-child(3) { stroke: #E7D84B; stroke-dashoffset: 21%;}
.text-copy:nth-child(4) { stroke: #EFEAC5; stroke-dashoffset: 28%;}
.text-copy:nth-child(5) { stroke: #1B8798; stroke-dashoffset: 35%;}
@-webkit-keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; }}
@keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; }}

HTML კოდი

<svg viewbox="0 0 1100 600">  <symbol id="s-text">    <text text-anchor="middle" x="50%" y="35%" class="text--line">      ანიმირებული ფერადი    </text>    <text text-anchor="middle" x="50%" y="68%" class="text--line2">      ტექსტი    </text>      </symbol>    <g class="g-ants">    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>       </g>    </svg>

 

ჩრდილი

გამოყენებულია ტაგი h1 კლასით class="elegantshadow"

ელეგანტური ჩრდილი

CSS კოდი

h1 {
font-family: "KA",Helvetica,sans-serif;
font-size: 92px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
h1.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}