Код для данного решения относительно прост, но требует конкретной подгонки всех параметров под размер секции и количества текста.
Пример:
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.txt-section { height: 30vw; box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 28px 30px rgba(0,0,0,0.2); overflow: hidden; } .txt-section svg { background-image: url(bg.jpg); background-size: cover; background-position: center; height: 100%; width: 100%; } .txt-section text { font-size: 5vw; font-weight: bold; font-family: 'Roboto', sans-serif; text-transform: uppercase; text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); } .txt-section tspan { font-size: 3vw; } .txt-section .xx { animation-name: xMove; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } .txt-section .yy { animation-name: yMove; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } @keyframes xMove { from {transform:translateX(0);} to {transform:translateX(100%)} } @keyframes yMove { from {transform:translateY(0);} to {transform:translateY(100%)} } |
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="txt-section"> <svg> <defs> <mask id="mask1"> <text y="40%" x="50%" fill="white" text-anchor="middle">Саратов <tspan y="75%" x="50%">Столица Поволжья!</tspan> </text> </mask> </defs> <text y="40%" x="50%" fill="#337AB7" text-anchor="middle">Саратов <tspan y="75%" x="50%">Столица Поволжья!</tspan> </text> <g class="xx"> <g class="yy"> <circle x="0" y="0" r="15%" stroke="#337AB7" stroke-width="3" fill="rgba(0,0,0,.3)"/> </g> </g> <g mask="url(#mask1)"> <g class="xx"> <g class="yy"> <circle x="0" y="0" r="15%" stroke="337AB7" stroke-width="3" fill="#BFE2FF"/> </g> </g> </g> </svg> </div> |
За основу взято решение, найденное на codepen.io у пользователя Jomohop
Смотрите также:
Варианты оформления закрывающих кнопок (close button) на CSS
4 варианта создания неонового (мерцающего) текста на чистом CSS
Варианты стилизации кнопок button и input, а также ссылок
Добавить комментарий: