Ever wondered how to make your website feel more interactive and futuristic? Dive into the world of hand scanning animations! This beginner-friendly tutorial will guide you through the process of building a cool hand scanning animation using just HTML and CSS – no fancy libraries or complicated JavaScript required.
Learn how to make a virtual hand glide over your content with smooth and responsive animations. We’ll cover the basics of HTML structure and then jazz it up with CSS styles for that futuristic touch. The best part? It works seamlessly on different devices and screen sizes.
In this step-by-step guide, discover the magic of CSS keyframes, transitions, and transforms to bring your hand scanning animation to life. We’ll keep it simple, making it easy for beginners to understand and implement. Plus, we might sprinkle in some extra tips to make your animation even more interactive – think hover effects and clicks.
Whether you’re just starting with HTML and CSS or want to add a futuristic vibe to your website, this tutorial is your ticket to creating a captivating hand scanning animation. Get ready to impress visitors and make your website stand out!
HTML :
The provided code is an HTML document that includes a hand scanning animation. It consists of a <div> element with the class “scan” that contains a hand image represented by the <div> element with the class “hand”. The hand image is animated using CSS to create scanning lines represented by the <div> element with the class “lines”. The animation is accompanied by a heading <h3> that says “Hand Print Scanning”.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Hand Scanning Animation | CodingStella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="scan">
<div class="hand">
<div class="lines"></div>
</div>
<h3>Hand Print Scanning</h3>
</div>
<!-- partial -->
</body>
</html>CSS :
The provided CSS code sets some global styles and defines the animation for a hand scanning effect. The key points of the code are as follows:
- The
*selector sets margin, padding, box-sizing, and font-family properties to all elements. - The
bodyselector sets the display to flex, aligning content in the center and setting a minimum height of 100vh (viewport height). - The
.scanclass sets the position to relative and displays its children in a column layout. - The
.handclass sets the position to relative, width and height to 500px, and applies a background image. - The
.hand::beforepseudo-element creates an overlay with a different background image and animates its height using theanimatekeyframes. - The
.hand::afterpseudo-element creates a horizontal line with a background color, border-radius, and drop shadow, animating its position using theanimateLineskeyframes. - The
.scan h3selector styles the heading with uppercase text, font size, letter spacing, color, and drop shadow, animating its opacity using theanimateTextkeyframes. - The
.hand .lines::beforepseudo-element creates vertical lines with a background image and animates their height using thehandLineskeyframes. - The
.hand .lines::afterpseudo-element creates points with a background image and animates their height using thehandPointskeyframes.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
}
.scan {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.scan .hand {
position: relative;
width: 500px;
height: 500px;
/* background: url(hand_02.png); */
background: url(https://codingstella.com/wp-content/uploads/2024/01/download-10.png);
background-size: 500px;
}
.scan .hand::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: url(hand_01.png); */
background: url(https://codingstella.com/wp-content/uploads/2024/01/download-11.png);
background-size: 500px;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
height: 0%;
}
50% {
height: 100%;
}
}
.scan .hand::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #3fefef;
border-radius: 8px;
filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
animation: animateLines 4s ease-in-out infinite;
}
@keyframes animateLines {
0%,
100% {
top: 0%;
}
50% {
top: 100%;
}
}
.scan h3 {
text-transform: uppercase;
font-size: 2em;
letter-spacing: 2px;
margin-top: 20px;
color: #3fefef;
filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
animation: animateText 0.5s steps(1) infinite;
}
@keyframes animateText {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.scan .hand .lines {
position: absolute;
inset: 0;
}
.scan .hand .lines::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
/* background: url(lines.png); */
background: url(https://codingstella.com/wp-content/uploads/2024/01/download-12.png);
background-size: 500px;
animation: handLines 4s ease-in-out infinite;
}
@keyframes handLines {
0%,
25%,
100% {
height: 0;
}
50% {
height: 100%;
}
}
.scan .hand .lines::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
/* background: url(points.png); */
background: url(https://codingstella.com/wp-content/uploads/2024/01/download-13.png);
background-size: 500px;
animation: handPoints 4s ease-in-out infinite;
}
@keyframes handPoints {
0%,
100% {
height: 0;
}
50% {
height: 100%;
}
}
Great job! You’ve crafted a cool hand scanning animation using HTML and CSS. Now, your website has that futuristic touch. Well done! Keep coding and exploring!
If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!
