• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать анимированный текст через CSS3 (Потрясающий анимированный эффект для текста на CSS)
Создать анимированный текст через CSS3
Kosten
Дата: Воскресенье, 2018-10-14, 11:36 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


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



HTML

Код
<body>
<p>
  <span>
    ZorNet.Ru Вебмастер
  </span>
</p>
</body>

CSS

Код
p {
  border: 3px double rgba(255, 255, 255, 0.25);
  border-width: 3px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 15%;
  left: 49%;
  width: 38em;
  margin: 0 0 0 -18em;
}
span {
    text-transform: uppercase;
    padding: 1px;
    display: block;
    text-shadow: 0 0 75px rgba(125, 122, 122, 0.9);
    animation: bounce-top 2s infinite both;
    font-size: 54px;
    font-weight: bold;
    font-family: PT Sans;
}

@keyframes bounce-top {
  0% {
    transform: translateY(-27px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}


Демонстрация
Прикрепления: 5738096.jpg(10.2 Kb)
Страна: (RU)
First
Дата: Воскресенье, 2018-10-14, 11:49 | Сообщение 2
Модераторы
Сообщений:749
Награды: 2


Его нужно переделывать и задавать классы. А так всё что в теге "p" будет прыгать в анимации
Страна: (UA)
Kosten
Дата: Воскресенье, 2018-10-14, 14:09 | Сообщение 3
Администраторы
Сообщений:18498
Награды: 55


First, пропиши клевый класс 09a
Страна: (RU)
First
Дата: Воскресенье, 2018-10-14, 15:51 | Сообщение 4
Модераторы
Сообщений:749
Награды: 2


Код

<div class="anim_txt">
<p>
<span>
Animated text
</span>
</p>
</div>


Код

.anim_txt {
background: #090d00;
color: rgba(255, 255, 255, 0.5);
text-align: center;
height: 200px;
}
.anim_txt p {
border: 4px double rgba(255, 255, 255, 0.25);
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
/* top: 18%; */
left: 50%;
width: 40em;
margin: 35px 0 0 -20em;
}
.anim_txt span {
text-transform: uppercase;
font: 700 4em/1 "Oswald", sans-serif;
padding: .25em 0 .325em;
display: block;
text-shadow: 0 0 80px rgba(255, 255, 255, 0.9);
animation: bounce-top 2s infinite both;
}
@keyframes bounce-top {
0% {
transform: translateY(-27px);
animation-timing-function: ease-in;
opacity: 1;
}
24% {
opacity: 1;
}
40% {
transform: translateY(-24px);
animation-timing-function: ease-in;
}
65% {
transform: translateY(-12px);
animation-timing-function: ease-in;
}
82% {
transform: translateY(-6px);
animation-timing-function: ease-in;
}
93% {
transform: translateY(-4px);
animation-timing-function: ease-in;
}
25%,
55%,
75%,
87% {
transform: translateY(0px);
animation-timing-function: ease-out;
}
100% {
transform: translateY(0px);
animation-timing-function: ease-out;
opacity: 1;
}
}


Сообщение отредактировал
First - Воскресенье, 2018-10-14, 15:52
Страна: (UA)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать анимированный текст через CSS3 (Потрясающий анимированный эффект для текста на CSS)
  • Страница 1 из 1
  • 1
Поиск: