• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды JavaScript » Набор текстовой анимации на HTML + CSS (Красивый набор текстовой анимаций на чистом CSS)
Набор текстовой анимации на HTML + CSS
Kosten
Дата: Вторник, 2019-12-03, 01:59 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


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

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

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

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



HTML

Код
<div class="container">

  <div class="degulopsabem seven">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>
      

  <div class="degulopsabem one">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>

  <div class="degulopsabem two">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>

  <div class="degulopsabem three">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>
      

  <div class="degulopsabem four">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>

  <div class="degulopsabem five">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>

  <div class="degulopsabem six">
   <span>С</span><span>А</span><span>Й</span><span>Т</span>  
   <span>Z</span><span>O</span><span>R</span><span>N</span><span>E</span><span>T</span><span>.</span><span>R</span><span>U</span>

CSS

Код
.container {
    width: 100%;
    margin: auto;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0 200px;
}

a, a:link, a:visited {
  text-decoration: none;
  padding: 9px 15px;
  border: 1px solid #ececec;
  border-radius: 5px;
  color: gray;
}

.degulopsabem {
    font-size: 50px;
    margin: 100px 0 0;
    border-bottom: 2px solid #ccc;
}

.degulopsabem span {
    display: inline-block;
}

a.repeat {
  display: inline-block;
  font-size: 12px;
  text-transform: none;
  text-decoration: none;
  color: orange;
  padding: 5px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-weight: normal;
  margin: 0 0 0 50px;
  border-radius: 3px;
  position: relative;
  bottom: 15px;
}

a.repeat:hover {
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

.degulopsabem span:nth-of-type(2) {
    animation-delay: .05s;
}
.degulopsabem span:nth-of-type(3) {
    animation-delay: .1s;
}
.degulopsabem span:nth-of-type(4) {
    animation-delay: .15s;
}
.degulopsabem span:nth-of-type(5) {
    animation-delay: .2s;
}
.degulopsabem span:nth-of-type(6) {
    animation-delay: .25s;
}
.degulopsabem span:nth-of-type(7) {
    animation-delay: .3s;
}
.degulopsabem span:nth-of-type(8) {
    animation-delay: .35s;
}
.degulopsabem span:nth-of-type(9) {
    animation-delay: .4s;
}
.degulopsabem span:nth-of-type(10) {
    animation-delay: .45s;
}
.degulopsabem span:nth-of-type(11) {
    animation-delay: .5s;
}
.degulopsabem span:nth-of-type(12) {
    animation-delay: .55s;
}
.degulopsabem span:nth-of-type(13) {
    animation-delay: .6s;
}
.degulopsabem span:nth-of-type(14) {
    animation-delay: .65s;
}
.degulopsabem span:nth-of-type(15) {
    animation-delay: .7s;
}
.degulopsabem span:nth-of-type(16) {
    animation-delay: .75s;
}
.degulopsabem span:nth-of-type(17) {
    animation-delay: .8s;
}
.degulopsabem span:nth-of-type(18) {
    animation-delay: .85s;
}
.degulopsabem span:nth-of-type(19) {
    animation-delay: .9s;
}
.degulopsabem span:nth-of-type(20) {
    animation-delay: .95s;
}

/* Animation One */

.one span {
    color: #24a8e6;
    opacity: 0;
    transform: translate(-150px, -50px) rotate(-180deg) scale(3);
    animation: revolveScale .4s forwards;
}

@keyframes revolveScale {
    60% {
  transform: translate(20px, 20px) rotate(30deg) scale(.3);
    }

    100% {
  transform: translate(0) rotate(0) scale(1);
  opacity: 1;
    }
}

/* Animation Two */

.two span {
    color: #a5cb21;
    opacity: 0;
    transform: translate(200px, -100px) scale(2);
    animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
    60% {
  transform: translate(0, 20px) rotate(-180deg) scale(.5);
    }

    100% {
  transform: translate(0) rotate(0deg) scale(1);
  opacity: 1;
    }
}

/* Animation Three */

.three span {
    color: #b10e81;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
    60% {
  transform: translate(20px, 0) scale(1);
  color: #b10e81;
    }

    80% {
  transform: translate(20px, 0) scale(1);
  color: #b10e81;
    }

    99% {
  transform: translate(0) scale(1.2);
  color: #00f0ff;
    }

    100% {
  transform: translate(0) scale(1);
  opacity: 1;
  color: #b10e81;
    }
}

/* Animation Four */

.four span {
    color: #8d6a00;
    opacity: 0;
    transform: translate(0, -100px) rotate(360deg) scale(0);
    animation: revolveDrop .3s forwards;
}

@keyframes revolveDrop {
    30% {
  transform: translate(0, -50px) rotate(180deg) scale(1);
    }

    60% {
  transform: translate(0, 20px) scale(.8) rotate(0deg);
    }

    100% {
  transform: translate(0) scale(1) rotate(0deg);
  opacity: 1;
    }
}

/* Animation Five */

.five span {
    color: #dd3f0f;
    opacity: 0;
    transform: translate(0, -100px) rotate(360deg) scale(0);
    animation: dropVanish .5s forwards;
}

@keyframes dropVanish {
    30% {
  transform: translate(0, -50px) rotate(180deg) scale(1);
    }

    50% {
  transform: translate(0, 20px) scale(.8) rotate(0deg);
  opacity: 1;
    }

    80% {
  transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
  opacity: 0;
    }

    100% {
  transform: translate(0) scale(1) rotate(0deg);
  opacity: 1;
    }
}

/* Animation Six */

.six span {
    color: #ddb40f;
    opacity: 0;
    transform: rotate(-180deg) translate(150px, 0);
    animation: twister .5s forwards;
}

@keyframes twister {
    10% {
  opacity: 1;
    }
    100% {
  transform: rotate(0deg) translate(0);
  opacity: 1;
    }
}

/* Animation Seven */

.seven span {
    color: #348c04;
    opacity: 0;
    transform: translate(-150px, 0) scale(.3);
    animation: leftRight .5s forwards;
}

@keyframes leftRight {
    40% {
  transform: translate(50px, 0) scale(.7);
  opacity: 1;
  color: #348c04;
    }

    60% {
  color: #0f40ba;
    }

    80% {
  transform: translate(0) scale(2);
  opacity: 0;
    }

    100% {
  transform: translate(0) scale(1);
  opacity: 1;
    }
}

JS

Код
$(function(){
    $('.repeat').click(function(){
     var classes =  $(this).parent().attr('class');
        $(this).parent().attr('class', 'ansakideg-ulopsabed');
        var indicator = $(this);
        setTimeout(function(){
         $(indicator).parent().addClass(classes);
        }, 20);
    });
});

Ручной выбор стиля текста и эффектов CSS со специальной анимацией текста, который разработан с использованием HTML и CSS.

Демонстрация
Прикрепления: 4391932.png(6.9 Kb) · css.zip(5.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды JavaScript » Набор текстовой анимации на HTML + CSS (Красивый набор текстовой анимаций на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: