Introduction
In today's digital age, web animation has become an essential element of engaging user experiences. It brings websites to life, captivating visitors with visually appealing and interactive content. Among the various technologies available for web animation, HTML and CSS stand out as powerful tools that allow developers to create mesmerizing effects. In this article, we will explore the magic of HTML and CSS in animating hearts, delving into different techniques, best practices, and real-life examples.
Preview:
Understanding HTML and CSS
Before diving into animation, it's important to have a basic understanding of HTML and CSS.HTML, known as Hypertext Markup Language, serves as the foundation for webpage structure and content. . CSS, or Cascading Style Sheets, determines the visual appearance and layout. Together, they form the backbone of web development.
Getting Started with HTML
To animate hearts using HTML, we need to start with the fundamental structure of an HTML document, Write the below the html code as it is given.
<!DOCTYPE html>
<html>
<head>
<title>Heart animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart"></div>
<div class="h1"></div>
<div class="h2"></div>
</body>
</html>
Adding Style with CSS
CSS allows us to style and customize the visual aspects of our HTML elements. Write the given Css in your style.css file.
body{
position:relative ;
top:200px;
left:50px;
height:200px;
width:200px;
background-color:white;
animation:colorchange 5s infinite ;
}
@keyframes colorchange{
0%{background-color:#669999;}
20%{background-color:#000000;}
40%{background-color:#000066;}
60%{background-color:#003300;}
80%{background-color:#006600;}
100%{background-color:#000080;}
}
.heart{
position:relative ;
left:20px;
height:100px;
width:100px;
background-color:deeppink;
border-radius:50%;
filter:drop-shadow(0 0 20px deeppink);
}
.h1{
position:absolute ;
margin-left:100px;
margin-top:-100px;
height:100px;
width:100px;
background-color:deeppink;
border-radius:50%;
filter:drop-shadow(0 0 20px deeppink);
}
.h2{
position:absolute ;
margin-left:60px;
margin-top:-60px;
height:100px;
width:100px;
background-color:deeppink;
transform:rotate(45deg);
filter:drop-shadow(0 0 20px deeppink);
}
Output:
0 Comments