• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Текстовая анимация Montserrat для сайта (Красивые текстовые эффекты на чистом CSS и HTML)
Текстовая анимация Montserrat для сайта
Kosten
Дата: Воскресенье, 2018-12-02, 23:49 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


При помощи 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
Дата: Воскресенье, 2018-12-02, 23:56 | Сообщение 2
Модераторы
Сообщений:750
Награды: 2


К новому году пойдет 50a
Страна: (UA)
Kosten
Дата: Понедельник, 2018-12-03, 00:45 | Сообщение 3
Администраторы
Сообщений:18866
Награды: 55


Цитата First ()
К новому году пойдет

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