🔧 Creating a Hand Scanning Animation with HTML and CSS || FREE Source Code
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
In this tutorial, we'll walk through the step-by-step process of creating a hand-scanning animation using HTML and CSS. This animation creates a visually engaging effect simulating a hand-scanning process, perfect for adding flair to your web projects.
Prerequisites
- Basic knowledge of HTML and CSS.
- A text editor (e.g., VS Code, Sublime Text).
- Web browser.
Step 1: Download the Assets
To begin, download the required assets from the provided link: CodeWithAarzoo Telegram Channel. The assets include two hand images (hand_01.png and hand_02.png), as well as two other images (lines.png and points.png) used for the scanning animation.
Step 2: Setting Up the HTML Structure
Open your text editor and create a new HTML file named index.html. Start by setting up the basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Define the character encoding and viewport settings -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to the external stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Set the title of the webpage -->
<title>Hand Scanning Animation</title>
</head>
<body>
<!-- Container for the scanning animation -->
<div class="scan">
<!-- Container for the hand image -->
<div class="hand">
<!-- Container for the lines representing scanning progress -->
<div class="lines"></div>
</div>
<!-- Heading indicating the type of animation -->
<h3>Hand Print Scanning</h3>
</div>
</body>
</html>
This HTML structure includes a container div with the class "scan", containing a hand image (div with class "hand") and lines representing the scanning progress (div with class "lines"). Below the scanning animation, there is a heading indicating the type of animation.
Step 3: Styling with CSS
Create a new CSS file named style.css in the same directory as your HTML file. Add the following CSS styles to create the hand scanning animation effect:
/* Apply CSS reset to remove default margin and padding, and set box-sizing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
/* Set default font family */
}
/* Style the body element */
body {
display: flex;
/* Use flexbox for layout */
justify-content: center;
/* Center content horizontally */
align-items: center;
/* Center content vertically */
min-height: 100vh;
/* Set minimum height to cover the viewport */
background: #111;
/* Set background color */
}
/* Style the container for the scanning animation */
.scan {
position: relative;
/* Positioning context for absolute positioned children */
display: flex;
/* Use flexbox for layout */
flex-direction: column;
/* Arrange children vertically */
align-items: center;
/* Center children horizontally */
}
/* Style the hand image */
.scan .hand {
position: relative;
/* Positioning context for pseudo-elements */
width: 500px;
/* Set width of the hand image */
height: 500px;
/* Set height of the hand image */
background: url(hand_02.png);
/* Set background image */
background-size: 500px;
/* Set background size to match container */
}
/* Style the scanning animation for the hand image */
.scan .hand::before {
content: "";
/* Create a pseudo-element */
position: absolute;
/* Position it absolutely within .hand */
top: 0;
/* Align it to the top of .hand */
left: 0;
/* Align it to the left of .hand */
width: 100%;
/* Make it take the full width of .hand */
height: 100%;
/* Make it take the full height of .hand */
background: url(hand_01.png);
/* Set background image */
background-size: 500px;
/* Set background size to match container */
animation: animate 4s ease-in-out infinite;
/* Apply animation */
}
/* Define keyframes for the scanning animation */
@keyframes animate {
0%,
100% {
height: 0%;
/* Set height to 0% at start and end */
}
50% {
height: 100%;
/* Set height to 100% at 50% mark */
}
}
/* Style the scanning lines */
.scan .hand::after {
content: "";
/* Create a pseudo-element */
position: absolute;
/* Position it absolutely within .hand */
top: 0;
/* Align it to the top of .hand */
left: 0;
/* Align it to the left of .hand */
width: 100%;
/* Make it take the full width of .hand */
height: 8px;
/* Set height of the scanning lines */
background: #3fefef;
/* Set background color of the lines */
border-radius: 8px;
/* Apply border radius to create rounded ends */
filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
/* Apply drop shadow effect */
animation: animateLines 4s ease-in-out infinite;
/* Apply animation */
}
/* Define keyframes for the scanning lines animation */
@keyframes animateLines {
0%,
100% {
top: 0%;
/* Set top position to 0% at start and end */
}
50% {
top: 100%;
/* Set top position to 100% at 50% mark */
}
}
/* Style the heading */
.scan h3 {
text-transform: uppercase;
/* Transform text to uppercase */
font-size: 2em;
/* Set font size */
letter-spacing: 2px;
/* Set letter spacing */
margin-top: 20px;
/* Set top margin */
color: #3fefef;
/* Set text color */
filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
/* Apply drop shadow effect */
animation: animateText 0.5s steps(1) infinite;
/* Apply animation */
}
/* Define keyframes for the text animation */
@keyframes animateText {
0%,
100% {
opacity: 0;
/* Set opacity to 0 at start and end */
}
50% {
opacity: 1;
/* Set opacity to 1 at 50% mark */
}
}
/* Style the lines representing scanning progress */
.scan .hand .lines {
position: absolute;
/* Position it absolutely within .hand */
inset: 0;
/* Make it fill the entire .hand container */
}
/* Style the lines image */
.scan .hand .lines::before {
content: "";
/* Create a pseudo-element */
position: absolute;
/* Position it absolutely within .lines */
top: 0;
/* Align it to the top of .lines */
left: 0;
/* Align it to the left of .lines */
width: 500px;
/* Set width of the lines image */
height: 500px;
/* Set height of the lines image */
background: url(lines.png);
/* Set background image */
background-size: 500px;
/* Set background size to match container */
animation: handLines 4s ease-in-out infinite;
/* Apply animation */
}
/* Define keyframes for the lines animation */
@keyframes handLines {
0%,
25%,
100% {
height: 0;
/* Set height to 0 at start, 25%, and end */
}
50% {
height: 100%;
/* Set height to 100% at 50% mark */
}
}
/* Style the points image */
.scan .hand .lines::after {
content: "";
/* Create a pseudo-element */
position: absolute;
/* Position it absolutely within .lines */
top: 0;
/* Align it to the top of .lines */
left: 0;
/* Align it to the left of .lines */
width: 500px;
/* Set width of the points image */
height: 500px;
/* Set height of the points image */
background: url(points.png);
/* Set background image */
background-size: 500px;
/* Set background size to match container */
animation: handPoints 4s ease-in-out infinite;
/* Apply animation */
}
/* Define keyframes for the points animation */
@keyframes handPoints {
0%,
100% {
height: 0;
/* Set height to 0 at start and end */
}
50% {
height: 100%;
/* Set height to 100% at 50% mark */
}
}
Step 4: Add the Assets
Make sure to place the downloaded images (hand_01.png, hand_02.png, lines.png, and points.png) in the same directory as your HTML and CSS files.
Step 5: View the Animation
Open the index.html file in your web browser, and you should see the hand-scanning animation effect in action!
Conclusion
In this tutorial, we've learned how to create a hand-scanning animation using HTML and CSS. By following these steps, you can easily integrate this animation into your web projects to add an engaging visual element.
Happy coding! 🚀
...