Домой / Рецепты CSS / Эффект трансформации текста в дым (туман) с помощью CSS
Эффект трансформации текста в дым (туман) с помощью CSS

Эффект трансформации текста в дым (туман) с помощью CSS

Предлагаю вашему вниманию пример создания эффекта превращения текстовой записи в дым (туман).  Эффект реализован с помощью CSS.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<span>W</span>
<span>O</span>
<span>R</span>
<span>D</span>
<span>P</span>
<span>R</span>
<span>E</span>
<span>S</span>
<span>S</span>
<span>-</span>
<span>C</span>
<span>L</span>
<span>U</span>
<span>B</span>
<span>.</span>
<span>C</span>
<span>O</span>
<span>M</span>

CSS

@import url(http://fonts.googleapis.com/css?family=Finger+Paint);
body {
 margin-top:200px;
 background: black;
 overflow: hidden;
 font: 50px "Finger Paint";
 text-align: center;
 color: transparent;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

a {
 color:#fff;
 font-size:20px;
 text-decoration:none;
 margin:0 auto;
 text-align:center;
}

span {
 display: inline-block;
 margin-bottom:200px;
 text-shadow: 0 0 0 whitesmoke;
 -webkit-animation: smoky 5s both;
 animation: smoky 5s both;
}

span:nth-child(even) {
 -webkit-animation-name: smoky-mirror;
 animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}

@keyframes smoky {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
@-webkit-keyframes smoky-mirror {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
@keyframes smoky-mirror {
 60% {
 text-shadow: 0 0 40px whitesmoke;
 }
 to {
 -webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
 text-shadow: 0 0 20px whitesmoke;
 opacity: 0;
 }
}
span:nth-of-type(1) {
 -webkit-animation-delay: 0.1s;
 animation-delay: 0.1s;
}

span:nth-of-type(2) {
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}

span:nth-of-type(3) {
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
}

span:nth-of-type(4) {
 -webkit-animation-delay: 0.4s;
 animation-delay: 0.4s;
}

span:nth-of-type(5) {
 -webkit-animation-delay: 0.5s;
 animation-delay: 0.5s;
}

span:nth-of-type(6) {
 -webkit-animation-delay: 0.6s;
 animation-delay: 0.6s;
}

span:nth-of-type(7) {
 -webkit-animation-delay: 0.7s;
 animation-delay: 0.7s;
}

span:nth-of-type(8) {
 -webkit-animation-delay: 0.8s;
 animation-delay: 0.8s;
}

span:nth-of-type(9) {
 -webkit-animation-delay: 0.9s;
 animation-delay: 0.9s;
}

span:nth-of-type(10) {
 -webkit-animation-delay: 1s;
 animation-delay: 1s;
}

span:nth-of-type(11) {
 -webkit-animation-delay: 1.1s;
 animation-delay: 1.1s;
}

span:nth-of-type(12) {
 -webkit-animation-delay: 1.2s;
 animation-delay: 1.2s;
}

span:nth-of-type(13) {
 -webkit-animation-delay: 1.3s;
 animation-delay: 1.3s;
}

span:nth-of-type(14) {
 -webkit-animation-delay: 1.4s;
 animation-delay: 1.4s;
}

span:nth-of-type(15) {
 -webkit-animation-delay: 1.5s;
 animation-delay: 1.5s;
}

span:nth-of-type(16) {
 -webkit-animation-delay: 1.6s;
 animation-delay: 1.6s;
}

span:nth-of-type(17) {
 -webkit-animation-delay: 1.7s;
 animation-delay: 1.7s;
}

span:nth-of-type(18) {
 -webkit-animation-delay: 1.8s;
 animation-delay: 1.8s;
}

span:nth-of-type(19) {
 -webkit-animation-delay: 1.9s;
 animation-delay: 1.9s;
}

span:nth-of-type(20) {
 -webkit-animation-delay: 2s;
 animation-delay: 2s;
}

span:nth-of-type(21) {
 -webkit-animation-delay: 2.1s;
 animation-delay: 2.1s;
}
Предлагаю вашему вниманию пример создания эффекта превращения текстовой записи в дым (туман).  Эффект реализован с помощью CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS @import url(http://fonts.googleapis.com/css?family=Finger+Paint); body { margin-top:200px; background: black; overflow: hidden; font: 50px &quot;Finger Paint&quot;; text-align: center; color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; } a { color:#fff; font-size:20px; text-decoration:none; margin:0 auto; text-align:center; } span { display: inline-block; margin-bottom:200px; text-shadow: 0 0 0 whitesmoke; -webkit-animation: smoky 5s both; animation:&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.76 ( 8 голосов )
100

9 комментариев

  1. Аватар

    Очень круто! Спасибо! 🙂

  2. Аватар
    Владимир

    а как сделать что-бы наооборот появлялся текст а не исчезал

  3. Аватар

    Чудно, всё у вас) Спасибо!

  4. Аватар

    А як зробити щоб воно відбуваолся по кліку мишки ?

  5. Аватар

    Спасибо

Оставить комментарий

Ваш email не будет опубликован.

*