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 27 28 29 30 31 32 33 |
<div class="txt-section"> <svg> <defs> <clipPath id="clip1"> <text y="40%" x="50%" text-anchor="middle"> Саратов <tspan y="75%" x="50%">Столица Поволжья!</tspan> </text> </clipPath> </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 cx="0" cy="0" r="15%" stroke="#337AB7" stroke-width="3" fill="rgba(0,0,0,.3)"/> </g> </g> <!-- Обрезанный слой с анимированным кругом --> <g clip-path="url(#clip1)"> <g class="xx"> <g class="yy"> <circle cx="0" cy="0" r="15%" stroke="#337AB7" stroke-width="3" fill="#BFE2FF"/> </g> </g> </g> </svg> </div> |
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 45 46 47 48 49 50 51 |
.txt-section { height: 60vh; box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 28px 30px rgba(0,0,0,0.1); overflow: hidden; background: #f0f0f0; transform: translateZ(0); border-radius: 10px; margin: 20px 0; } .txt-section svg { background-image: url(background.jpg); background-size: cover; background-position: center; height: 100%; width: 100%; } .txt-section text { font-size: clamp(30px, 5vw, 100px); font-weight: bold; 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: clamp(20px, 4vw, 80px); } .xx { animation-name: xMove; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; } .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%); } } .txt-section svg { will-change: transform; backface-visibility: hidden; } |

Добавить комментарий: