Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Incoming Call Animation Effect using CSS?
Cascading style sheets (CSS) enables the developers to create visual effects to your web page which makes it attractive and user-friendly. CSS provides a variety of properties, such as colours, flexbox, grids, animation, shadowing, etc., to style the elements, resulting in a website that is appealing to many users and is user-friendly.
In this article, we have discussed about how to design Incoming Call Animation effect using HTML and CSS. In order to create this effect, we will be using CSS animation property and box-shadow property.
CSS Animations
It enables the developers to add animation effects like moving, vibrating etc., to the HTML elements for giving aesthetic value to our webpage.
Syntax
animation: animation-name | animation-duration | speed;
CSS Box-shadow Property
It enables the developers to provide dark shadow on one side while a light shadow to other side.
Syntax
box-shadow: values;
Values of this property are −
None − no shadow is displayed on the element. It is the default value.
Offset-X − how far to push the shadow horizontally from the element. Positive values of offset-X create a shadow to the right side of the element. Whereas negative values place the shadow to the left side of the element.
Offset-Y − how far to push the shadow vertically from the element. Positive values of offset-Y create the shadow above the element whereas negative values create below the element.
Blur-radius − it specifies the clarity of the shadow. The more is the number, more the shadow is blur which means the shadow will be bigger and lighter
Spread- radius − it specifies the size of the shadow. If its value is positive, then the size increases. If it is negative, then the size decreases.
Color − it specifies the color of the shadow.
Inset − It enables the developers to create shadow which gives an effect such that the content of the element appears to be below the border. It thus, creates shadows within the border.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px yellow;
}
</style>
</head>
<body>
<h1>The box-shadow property</h1>
<article id="demo">
<p>This is an article element with a shadow. It contains four values that are offset-X (horizontal distance), offset-Y (vertical distance), spread radius and color. </p>
</article>
</body>
</html>
Creating Incoming Call Animation Effect
In the following example, we are trying to display a phone ringing icon using CSS Font awesome icons.
Then, we have used the box-shadow property and CSS animations to create the ringing effect. In order to control the sequence of animation, we have used @keyframes
Example
<!DOCTYPE html>
<html>
<head>
<title>Incoming Call Animation</title>
<link rel="stylesheet" href= "https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<style>
body{
height: 80%;
margin: 10px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
section{
position: absolute;
top: 10%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid orange;
height: 65%;
width: 40%;
}
.call{
position: relative;
background: black;
color: orange;
font-size: 35px;
font-weight: bold;
width: 70px;
height: 70px;
border-radius: 100%;
border: solid 5px black;
animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
}
.img{
position: absolute;
top: 20px;
left: 20px;
height: 60px;
width: 50px;
}
@keyframes anim {
0% {
box-shadow: 0 1px 0 4px #ffffff;
}
10%{
box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
}
25% {
box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
}
50% {
box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
}
}
@keyframes vibration {
0% { transform: rotate(0deg); }
25% { transform: rotate(20deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<section>
<div class= "call">
<i class= "fas fa-solid fa-phone img"> </i>
</div>
</section>
</body>
</html>
Incoming call icon will be displayed on the web page and the ringing effect will be observed due to the animations.
Conclusion
Customers in modern tech market need more website involvement. At this point, animation plays a crucial role in enhancing communication. The interactive nature of animation encourages user interaction, improving the user experience. Engaging a top website development firm to include animation in your site would be beneficial if you want your website to stand out from the competition and be loved by your target audience at the same time.
523 Views
