Примеры анимации текста для сайта на CSS - Форум

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

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

Форум » Веб-разработка » HTML + CSS — коды » Примеры анимации текста для сайта на CSS (Набор оригинальных анимированных эффектов CSS для текста)

Примеры анимации текста для сайта на CSS

Kosten

Четверг, 06 Мая 2021 | Сообщение 1

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

Сообщений:44355

Награды: 70

« 555 »

Тема предназначена для подборки разных красивых эффектов, которые производятся на тексте, что смотрится красиво на любом сайте. Здесь представлены просто потрясающие текстовые анимации, которые можно задействовать в своих веб-проектах. Где безусловно пойдет как элемент дизайна, плюс анимация, которая исполнена на чистом CSS.

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

Прикрепления: 9909649.gif (6.9 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 2

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

Сообщений:44355

Награды: 70

« 555 »

Анимация букв и знаков, которые появляются по очереди, что выглядит оригинально.

HTML

Код

<div class="container">
<h1 class="heading">ZorNet.Ru — сайт для вебмастера</h1>
</div>

CSS

Код

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heading{
  letter-spacing: 1rem;
  font-family: fantasy;
  color: blue;
}

span{
  display: inline-block;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.4s ease-in-out
}

.fade{
opacity: 1;
transform: translateY(0);
}

Код

const heading = document.querySelector('.heading');
const characters = heading.textContent.match(/[\w\W]/g);    //Get the texts and create an array.
heading.textContent = '';    //Empty the contents.
characters.forEach(char => {
  const span = document.createElement('span');
  span.textContent = char;
  heading.appendChild(span);
});

// Create charcter count variable and set timer with new function called setChar().
let char = 0;
let timer = setInterval(setChar, 100);

function setChar(){
  const spanChar = document.querySelectorAll('span')[char];
  spanChar.className = 'fade';
  char++;
  char === characters.length && clearInterval(timer);
}

See the Pen
Text animation-css3 by Kocsten (@kocsten)
on CodePen.

Прикрепления: text-animation-.zip (3.5 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 3

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

Сообщений:44355

Награды: 70

« 555 »

Фрагмент анимации нарезанного текста HTML + CSS

HTML

Код

<div class="deconstructed">
  ZorNet.Ru
  <div>ZorNet.Ru</div>
  <div>ZorNet.Ru</div>
  <div>ZorNet.Ru</div>
  <div>ZorNet.Ru</div>
</div>

CSS

Код

.deconstructed {
  position: relative;
  margin: auto;
  height: 0.71em;
  color: transparent;
  font-family: 'Cambay', sans-serif;
  font-size: 10vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03em;
}

.deconstructed > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffff64;
  pointer-events: none;
}

.deconstructed > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
  mask-image: linear-gradient(black 25%, transparent 25%);
  animation: deconstructed1 5s infinite;
}

.deconstructed > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  animation: deconstructed2 5s infinite;
}

.deconstructed > div:nth-child(3) {
   -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  animation: deconstructed3 5s infinite;
}

.deconstructed > div:nth-child(4) {
   -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%);
  animation: deconstructed4 5s infinite;
}

@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-120%);
  }
}

@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-125%);
  }
}

@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-130%);
  }
}

@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-135%);
  }
}

See the Pen
DECONSTRUCTED by Kocsten (@kocsten)
on CodePen.

Прикрепления: 7670738.png (9.6 Kb) · deconstructed.zip (3.3 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 4

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

Сообщений:44355

Награды: 70

« 555 »

Анимация волнистый текст при исполнение CSS

HTML

Код

CSS

Код

.waviy {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i))
}
@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}

See the Pen
wavy text animation css by Waad Mohammed (@WaadAlnwar)
on CodePen.

Прикрепления: 6854060.png (8.7 Kb) · wavy-text-anima.zip (2.8 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 5

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

Сообщений:44355

Награды: 70

« 555 »

Переворот текстовой анимации при исполнение CSS

HTML

Код

CSS

Код

.waviy {
  position: relative;
}
.waviy span {
  position: relative;
  display: inline-block;
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  animation: flip 2s infinite;
  animation-delay: calc(.2s * var(--i))
}
@keyframes flip {
  0%,80% {
    transform: rotateY(360deg)
  }
}

See the Pen
Flip text animation by Kocsten (@kocsten)
on CodePen.

Прикрепления: 3689232.png (5.2 Kb) · flip-text-anima.zip (2.7 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 6

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

Сообщений:44355

Награды: 70

« 555 »

Текстовая анимация по траектории знаков на HTML + CSS

HTML

Код

<div class="bottom-container">
Hello, there!
</div>

<div class="top-container">
Hello, there!
</div>

CSS

Код

.bottom-container,
.top-container {
  width: 40vw;
  height: 35vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 35vh;
  left: 30vw;
  padding: 1vw;
}

.bottom-container {
  color: #232323;
}

.top-container {
  background-color: red;
  color: white;
  clip-path: circle(13% at 85% 50%);
  animation: circleMove 100s ease-in-out infinite;
}

@keyframes circleMove {
  0%, 100% {
    clip-path: circle(13% at 85% 50%);
  }
  50% {
    clip-path: circle(13% at 15% 50%);
  }
}

See the Pen
Text animation-css by Kocsten (@kocsten)
on CodePen.

Прикрепления: 3222833.png (7.8 Kb) · 6940540.zip (2.7 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 7

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

Сообщений:44355

Награды: 70

« 555 »

Базовая анимация текста на чистом CSS, которая отлично подойдет под оформление сайта.

HTML

Код

<body>
  <div class='line'>
    <h2 class='flipX'>flip vertical</h2>
  </div>
  <div class="line">
    <h2 class='lineUp'>line up</h2>
  </div>
  <div class='line'>
    <h2 class='flipY'>flip horizontal</h2>
  </div>
  <div class='line'>
    <h2 class='pop-outin'>text pop-out-in</h2>
  </div>

</body>

CSS

Код

h2 {
  text-align: center;
  padding: 16px;
  margin: 0;
}

/* crops animations that exceeds one line area */
.line {
  width: 100%;
  height: 4rem;
  overflow: hidden;
  border: 1px solid black;
  padding: 0;
  margin-bottom: 16px;
}

/* flipping class and key frames*/
.flipX {
  animation: 1s anim-flipX ease infinite;
}
@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90def);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}

/* lineup class and keyframes */
.lineUp {
  animation: 2s anim-lineUp ease-out infinite;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* flipY class and keyframes*/
.flipY {
  animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes depth {
  0% {
    text-shadow: 0 0 black;
  }
  25% {
    text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black;
  }
  50% {
    text-shadow: 0 0 black;
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
      -5px 0 black;
  }
  100% {
    text-shadow: 0 0 black;
  }
}

/* subtle zoom to attention and then back */
.pop-outin {
  animation: 2s anim-popoutin ease infinite;
}

@keyframes anim-popoutin {
  0% {
    color: black;
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    color: red;
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    color: black;
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    /* animate nothing to add pause at the end of animation */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}

.fromtop {
  animation: 2s anim-fromtop linear infinite;
}
@keyframes anim-fromtop {
  0% { opacity: 0; transform: translateY(-100%);}
  25% { opacity: 1; transform: translateY(0%);}
  50% {
  }
  100% {
  }
}

See the Pen
Vertical by Kocsten (@kocsten)
on CodePen.

Прикрепления: 9582767.png (17.1 Kb) · pure-css-text-b.zip (3.9 Kb)

Страна: (RU)

Kosten

Четверг, 06 Мая 2021 | Сообщение 8

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

Сообщений:44355

Награды: 70

« 555 »

Эффект текстовой анимации, где можно подчеркнуть те знаки, которые вам нужно показать, так как они поменяют фон на некоторое время.

Красивый эффект текстовой анимации со сменой слов

HTML

Код

<h1>
  <span>ZorNet.Ru</span>
  <div class="message">
    <div class="word1">close</div>
    <div class="word2">code</div>
    <div class="word3">creating</div>
  </div>
</h1>

CSS

Код

h1 {
  color: #333;
  font-family: tahoma;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 550px;
}

h1 span {
  font-size: 40px;
  margin-left: 40px;
}

.message {
  background-color: yellow;
  color: #333;
  display: block;
  font-weight: 900;
  overflow: hidden;
  position: absolute;
  padding-left: 0.5rem;
  top: 0.2rem;
  left: 270px;
  animation: openclose 5s ease-in-out infinite;
}

.word1, .word2, .word3 {
  font-family: tahoma;
}

@keyframes openclose {
  0% {
    top: 0.2rem;
    width: 0;
  }
  5% {
    width: 0;
  }
  15% {
    width: 230px;
  }
  30% {
    top: 0.2rem;
    width: 230px;
  }
  33% {
    top: 0.2rem;
    width: 0;
  }
  35% {
    top: 0.2rem;
    width: 0;
  }
  38% {
    top: -4.5rem;

  }
  48% {
    top: -4.5rem;
    width: 190px;
  }
  62% {
    top: -4.5rem;
    width: 190px;
  }
  66% {
    top: -4.5rem;
    width: 0;
    text-indent: 0;
  }
  71% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  86% {
    top: -9rem;
    width: 285px;
  }
  95% {
    top: -9rem;
    width: 285px;
  }
  98% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  100% {
    top: 0;
    width: 0;
    text-indent: 0;
  }
}

See the Pen
ALWAYS by Kocsten (@kocsten)
on CodePen.

Прикрепления: 1580769.png (8.5 Kb) · always-7.zip (3.0 Kb)

Страна: (RU)

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