• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Текстовая анимация Montserrat для сайта (Красивые текстовые эффекты на чистом CSS и HTML)
Текстовая анимация Montserrat для сайта
Kosten
Воскресенье, 02 Декабря 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
При помощи HTMLи стилистике CSS можно создать красивую текстовую анимацию. Которую можно поставить под ключевые слова или логотип. Она делается для того, чтоб как можно больше внимание было.

Здесь безусловно все зависит от самого трюка. В материале представлена анимация, где можно применить несколько оттенков цвета. А это создать как под светлый или темный фон с прикрепленный шрифтом.

Так выглядит на светлом фоне.



Здесь на темном уже немного по другому, хотя вся палитра осталась по умолчанию.



HTML

Код
<svg viewBox="0 0 960 300">
    <symbol id="gesa-migun">
  <text text-anchor="middle" x="50%" y="80%">Zornet.Ru</text>
    </symbol>

    <g class = "g-ants">
  <use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
  <use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
  <use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
  <use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
  <use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
    </g>
</svg>


CSS

Код
svg {
    display: block;
    font: 10.5em 'Montserrat';
    width: 673px;
    height: 275px;
    margin: 0 auto;
}

.sudanud-kopesta {
    fill: none;
        stroke: #f5f2f2;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.sudanud-kopesta:nth-child(1){
    stroke: #481138;
    animation-delay: -1;
}

.sudanud-kopesta:nth-child(2){
    stroke: #7b0a39;
    animation-delay: -2s;
}

.sudanud-kopesta:nth-child(3){
    stroke: #c71748;
    animation-delay: -3s;
}

.sudanud-kopesta:nth-child(4){
    stroke: #d41a4d;
    animation-delay: -4s;
}

.sudanud-kopesta:nth-child(5){
    stroke: #f3b949;
    animation-delay: -5s;
}

@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}


Демонстрация
Прикрепления: 5750731.png (25.9 Kb) · 7234154.png (18.2 Kb)
Страна: (RU)
First
Воскресенье, 02 Декабря 2018 | Сообщение 2
Оффлайн
Vip
Сообщений:819
Награды: 4
К новому году пойдет 50a
Страна: (UA)
Kosten
Понедельник, 03 Декабря 2018 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Цитата First ()
К новому году пойдет

Как то и не думал. просто на codepen.io не одна видно сотня вариаций, вот стараюсь выбрать, что красивее, в общем, и по простоте установке, хотя здесь по стандарту.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Текстовая анимация Montserrat для сайта (Красивые текстовые эффекты на чистом CSS и HTML)
  • Страница 1 из 1
  • 1
Поиск: