See the Pen
HTML5 CSS Smoke Effect by Bikash Panda (@phpcodertech)
on CodePen.
In This Article
Hello Guys, here is another interesting effect using HTML and CSS, review below code and comment below what you think about it.
Your work looks like this,
HTML Source:
animate.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section><video src="Smoke.mp4" autoplay muted></video> <h1> <span>P</span> <span>H</span> <span>P</span> <span>C</span> <span>O</span> <span>D</span> <span>E</span> <span>R</span> </h1> </section> </body> </html> |
CSS Source:
animate.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
body { margin: 0; padding: 0; } section{ height:100vh; background: #000; } section:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, red , yellow,#FF8700, yellow, red); mix-blend-mode: color; pointer-events: none; } video{ object-fit: cover; height: 100%; width: 100%; } h1{ margin: 0; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #ddd; font-size: 5em; font-family: sans-serif; letter-spacing: 0.2em; } h1 span{ display: inline-block; animation: animate 1s linear forwards; } @keyframes animate{ 0%{ opacity: 0; transform: rotateY(90deg); filter: blur(10px); } 100%{ opacity: 1; transform: rotateY(0deg); filter: blur(0px); } } h1 span:nth-child(1) { animation-delay:1s; } h1 span:nth-child(2) { animation-delay:2s; } h1 span:nth-child(3) { animation-delay:2.5s; } h1 span:nth-child(4) { animation-delay:3s; } h1 span:nth-child(5) { animation-delay:3.5s; } h1 span:nth-child(6) { animation-delay:4s; } h1 span:nth-child(7) { animation-delay:4.5s; } h1 span:nth-child(8) { animation-delay:5s; } |
If anyone wants this background video to ping me on the comment box.
Thank You and Happy Coding..!
Was this article helpful?
YesNo
Such nice Post!
Not really what I call “HTML5 CSS Smoke Effect”, but OK.
great work ,can i get video please thanks
Thanks
http://phpcoder.tech/html-css/Smoke.mp4
Open this link and right-click on the video then click on Save.