Создать анимированный текст через CSS3 - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Создать анимированный текст через CSS3 (Потрясающий анимированный эффект для текста на CSS)

Создать анимированный текст через CSS3

Kosten

Воскресенье, 14 Октября 2018 | Сообщение 1

Администраторы

Сообщений:44330

Награды: 70

« 555 »

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

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

Воскресенье, 14 Октября 2018 | Сообщение 2

Vip

Сообщений:819

Награды: 4

« 37 »

Его нужно переделывать и задавать классы. А так всё что в теге "p" будет прыгать в анимации

Страна: (UA)

Kosten

Воскресенье, 14 Октября 2018 | Сообщение 3

Администраторы

Сообщений:44330

Награды: 70

« 555 »

First, пропиши клевый класс 09a

Страна: (RU)

First

Воскресенье, 14 Октября 2018 | Сообщение 4

Vip

Сообщений:819

Награды: 4

« 37 »

Код

<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 - Воскресенье, 14 Октября 2018, 15:52

Страна: (UA)

Страница 1 из 1
1