Предлагаю вашему вниманию пример создания эффекта превращения текстовой записи в дым (туман). Эффект реализован с помощью 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 пропиши правило, что бы все начиналось через определенный айдишник. JS делаешь передачу айдишника своему контейнеру на клик.
При клике, контейнер получает айди, и начинается вся магия)
Как-то так
https://codepen.io/anon/pen/RJWaYw
Спасибо