Aug. 19, 2023, 11:06 a.m. | dimple031

DEV Community dev.to

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

Research Scholar (Technical Research)

@ Centre for the Governance of AI | Hybrid; Oxford, UK

HPC Engineer (x/f/m) - DACH

@ Meshcapade GmbH | Remote, Germany

Business Intelligence Analyst Lead

@ Zillow | Mexico City

Lead Data Engineer

@ Bristol Myers Squibb | Hyderabad

Big Data Solutions Architect

@ Databricks | Munich, Germany

Senior Data Scientist - Trendyol Seller

@ Trendyol | Istanbul (All)