Rotating Text Effect After Smog by HTML, CSS

Ticker

10/recent/ticker-posts

Rotating Text Effect After Smog by HTML, CSS

AK Creative 12/21/2020 04:21:00 PM

 Smog Rotating Text Effect


HTML

<!doctype html>

<html>

<head>

<title>Text With Smoke</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body background="#289fb8">

<section>

<video color="red"src="smoke.mp4" autoplay muted></video>

<h1>

<span>M</span>

<span>A</span>

<span>A-</span>

<span>B</span>

<span>L</span>

<span>O</span>

<span>G</span>

<span>G</span>

<span>E</span>

<span>R</span><br/>

<font color="red"><span>H</span>

<span>A</span>

<span>P</span>

<span>P</span>

<span>Y</span><br/>

<span>N</span>

<span>E</span>

<span>W</span><br/>

<span>Y</span>

<span>E</span>

<span>A</span>

<span>R</span><br/></font>

<font color="green"><span>2</span>

<span>0</span>

<span>2</span></font>

<font color="yellow"><span>1</span><br/></font>

<span>I</span>

<span>N</span><br/>

<font color="yellow"><span>A</span>

<span>D</span>

<span>V</span>

<span>A</span>

<span>N</span>

<span>C</span>

<span>E</span></font>

</h1>

</section>

</body>


CSS

body
{
margin: 0;
padding: 0;
}
section
{
height: 100vh;
background: #000;
}
video
{
object-fit: cover;
}
h1
{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #289fb8;
font-size: 3em;
font-family: centuary;
letter-spacing: 0.1em;
}
h1 span
{
display: inline-block;
animation: animate 2s linear forwards;
}
@keyframes animate
{
0%
{
opacity: 3;
transform: rotateY(180deg);
filter: blur(20px);
}
100%
{
opacity: 5;
transform: rotateY(30deg);
filter: blur(0);
}
}
h1 span:nth-child(1)
{
animation-delay: 1s;
}
h1 span:nth-child(2)
{
animation-delay: 1.5s;
}
h1 span:nth-child(3)
{
animation-delay: 2s;
}
h1 span:nth-child(4)
{
animation-delay: 2.5s;
}
h1 span:nth-child(5)
{
animation-delay: 3s;
}
h1 span:nth-child(6)
{
animation-delay: 3.5s;
}
h1 span:nth-child(7)
{
animation-delay: 3.75s;
}
h1 span:nth-child(8)
{
animation-delay: 4s;
}
h1 span:nth-child(9)
{
animation-delay: 4.25s;
}
h1 span:nth-child(10)
{
animation-delay: 4.5s;
}
h1 span:nth-child(11)
{
animation-delay: 4.75s;
}
h1 span:nth-child(12)
{
animation-delay: 5s;
}
h1 span:nth-child(13)
{
animation-delay: 5.25s;
}
h1 span:nth-child(14)
{
animation-delay: 5.5s;
}
h1 span:nth-child(15)
{
animation-delay: 5.75s;
}
h1 span:nth-child(16)
{
animation-delay: 6s;
}
h1 span:nth-child(17)
{
animation-delay: 6.25s;
}
h1 span:nth-child(18)
{
animation-delay: 6.5s;
}
h1 span:nth-child(19)
{
animation-delay: 6.75s;
}
h1 span:nth-child(20)
{
animation-delay: 7.0s;
}
h1 span:nth-child(21)
{
animation-delay: 7.25s;
}
h1 span:nth-child(22)
{
animation-delay: 7.5s;
}
h1 span:nth-child(23)
{
animation-delay: 7.75s;
}
h1 span:nth-child(24)
{
animation-delay: 8.0s;
}
h1 span:nth-child(25)
{
animation-delay: 8.25s;
}
h1 span:nth-child(26)
{
animation-delay: 8.5s;
}
h1 span:nth-child(27)
{
animation-delay: 8.75s;
}
h1 span:nth-child(28)
{
animation-delay: 9.0s;
}
h1 span:nth-child(29)
{
animation-delay: 9.25s;
}
h1 span:nth-child(30)
{
animation-delay: 9.75s;
}
h1 span:nth-child(31)
{
animation-delay: 10.0s;
}
h1 span:nth-child(32)
{
animation-delay: 10.25s;
}
h1 span:nth-child(33)
{
animation-delay: 10.5s;
}
h1 span:nth-child(34)
{
animation-delay: 10.75s;
}
h1 span:nth-child(35)
{
animation-delay: 11.0s;
}


OUTPUT




Download this Video & Use in this program

After Effect

Post a Comment

49 Comments

  1. Unique KnowDecember 21, 2020 at 4:23 PM

    Wowwww
    It's great

    ReplyDelete
  2. Max Gaur presentsDecember 21, 2020 at 4:43 PM

    Nice code and graphics

    ReplyDelete
  3. SonaDecember 21, 2020 at 5:12 PM

    Excellent👍

    ReplyDelete
  4. Rinku rinku upadhyayDecember 21, 2020 at 5:19 PM

    Good

    ReplyDelete
  5. WonderingDecember 21, 2020 at 5:25 PM

    Excellent👍

    ReplyDelete
  6. Excellent workDecember 21, 2020 at 5:26 PM

    Very Nice

    ReplyDelete
  7. AwesomeDecember 21, 2020 at 5:26 PM

    Excellent👍

    ReplyDelete
  8. Jaunpur GPDecember 21, 2020 at 5:27 PM

    Awesome

    ReplyDelete
  9. WonderfulDecember 21, 2020 at 5:28 PM

    Excellent job

    ReplyDelete
  10. Rock_ArviDecember 21, 2020 at 5:29 PM

    Excellent👍

    ReplyDelete
  11. A A ADecember 21, 2020 at 5:30 PM

    Wonderful

    ReplyDelete
  12. ArviDecember 21, 2020 at 5:31 PM

    Excellent👍

    perfect 👌

    ReplyDelete
  13. UnknownDecember 21, 2020 at 5:31 PM

    Superb

    ReplyDelete
  14. FabulousDecember 21, 2020 at 5:32 PM

    Excellent👍
    Super

    ReplyDelete
  15. MLLDecember 21, 2020 at 5:33 PM

    Great

    ReplyDelete
  16. SuperDecember 21, 2020 at 5:33 PM

    Excellent👍

    ReplyDelete
  17. UnknownDecember 21, 2020 at 5:43 PM

    Kallu
    Nice

    ReplyDelete
  18. Arjun panditDecember 21, 2020 at 7:00 PM

    Nice

    ReplyDelete
  19. UnknownDecember 21, 2020 at 7:31 PM

    Kallu
    Very nice

    ReplyDelete
  20. ArzuDecember 23, 2020 at 8:11 PM

    Perfect 👌 👌 👌 👌 👌 👌

    ReplyDelete
  21. UnknownDecember 23, 2020 at 8:14 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  22. UnknownDecember 23, 2020 at 8:16 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  23. UnknownDecember 23, 2020 at 8:18 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  24. UnknownDecember 23, 2020 at 8:21 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  25. UnknownDecember 23, 2020 at 8:23 PM

    👌 👌 👌 👌 👌 👌
    👌 👌 👌 👌 👌 👌

    ReplyDelete
  26. UnknownDecember 23, 2020 at 8:25 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  27. UnknownDecember 23, 2020 at 8:28 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  28. UnknownDecember 23, 2020 at 8:30 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  29. UnknownDecember 23, 2020 at 8:32 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  30. UnknownDecember 23, 2020 at 8:34 PM

    👌 👌 👌 👌 👌 👌

    ReplyDelete
  31. UnknownDecember 25, 2020 at 4:58 PM

    Excellent

    ReplyDelete
  32. UnknownDecember 25, 2020 at 5:02 PM

    Excellent

    ReplyDelete
  33. UnknownDecember 25, 2020 at 5:06 PM

    Perfect 👌

    ReplyDelete
  34. UnknownDecember 25, 2020 at 5:10 PM

    Awesome

    ReplyDelete
  35. son aDecember 25, 2020 at 5:13 PM

    Awesome

    ReplyDelete
  36. snehaDecember 25, 2020 at 5:18 PM

    Attractive

    ReplyDelete
  37. UnknownDecember 25, 2020 at 5:21 PM

    Wonderful

    ReplyDelete
  38. UnknownDecember 25, 2020 at 5:25 PM

    Superb

    ReplyDelete
  39. UnknownDecember 25, 2020 at 5:31 PM

    Wonderful

    ReplyDelete
  40. UnknownDecember 25, 2020 at 5:34 PM

    Very Nice

    ReplyDelete
  41. UnknownDecember 25, 2020 at 5:38 PM

    Very Nice

    ReplyDelete
  42. KKDecember 25, 2020 at 6:04 PM

    Great

    ReplyDelete
  43. UnknownDecember 25, 2020 at 6:07 PM

    Nice Work Guys

    ReplyDelete
  44. UnknownDecember 25, 2020 at 6:10 PM

    Nicely done

    ReplyDelete
  45. UnknownDecember 25, 2020 at 6:12 PM

    Brilliant

    ReplyDelete
  46. UnknownDecember 25, 2020 at 6:15 PM

    Wow wonderful

    ReplyDelete
  47. KritikaDecember 25, 2020 at 6:18 PM

    Perfect

    ReplyDelete
  48. SuperDecember 26, 2020 at 10:59 PM

    Amazing creation

    ReplyDelete