all AI news
Face Hop animation using CSS and Js
Jan. 7, 2024, 12:03 p.m. | Danial Habib
DEV Community dev.to
Here is the cool Face Hop animation using CSS and Js.
HTML
Here is the HTML part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Face Hop Animation using CSS and Js</title>
</head>
<body>
<div class="container">
<div class="shadow"></div>
<div class="squish">
<h1 data-3d-text> </h1>
</div>
<div class="particles">
<div class="floor"></div>
<div class="air"></div>
</div>
</div>
<script type="module" src="script.js"></script>
</body>
</html>
Here, the script type is the module
CSS
Now, let’s add some CSS
@charset "UTF-8";
@import url("https://cdn.skypack.dev/that-3d-text-library/lib/styles.css"); …animation class css data face head html meta part scale shadow text
More from dev.to / DEV Community
Jobs in AI, ML, Big Data
Data Architect
@ University of Texas at Austin | Austin, TX
Data ETL Engineer
@ University of Texas at Austin | Austin, TX
Lead GNSS Data Scientist
@ Lurra Systems | Melbourne
Senior Machine Learning Engineer (MLOps)
@ Promaton | Remote, Europe
Software Engineer, Data Tools - Full Stack
@ DoorDash | Pune, India
Senior Data Analyst
@ Artsy | New York City