See the Pen HTML5 CSS Smoke Effect by Bikash Panda (@phpcodertech) on CodePen. 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 […]
