Smoke Animation(color with background music)

link: http://127.0.0.1:5500/index.html

code:

Html, css:

Smoke Animation

<br>
body{<br>
background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);<br>
width:fit-content;<br>
height: fit-content;<br>
}<br>
section {<br>
height:90vh;<br><br>
}<br>
section:before {<br>
content: &#39;&#39;;<br>
position: absolute;<br>
top:0;<br>
left:0;<br>
width: 100%;<br>
height: 100%;<br>
background: linear-gradient(to right, #e8bce8, #F39F5A, #AE445A, #662549, #451952, #1d1a39);<br>
pointer-events: none;<br>
mix-blend-mode: color;<br>
animation: animate 5s linear infinite;<br>
}<br>
video {<br>
background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);<br>
object-fit: cover;<br>
margin-left: 5px;<br>
top:40%;<br>
}<br>
h1 {<br>
position:absolute;<br>
top:50%;<br>
width:100%;<br>
transform: translateY(-50%);<br>
text-align:center;<br> …

animation code color css events gradient html javascript linear smoke video