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 animated banner links using HTML and CSS
Overview
We can create animated banners using the HTML and CSS, HTML provides the layout of the banner and CSS provides the styling of the banners with the animations. Sometimes in the banners which are made for advertisement purpose links are embedded to them, so to highlight the link to the user of the web page the developer makes the link animated so it can be visible throughout the web content and that should increase the interest of the users to click it.
Syntax
The syntax to create a link in the HTML is −
<a href="#"></a>
Algorithm
Step 1 − Create a HTML file in a text editor, with a HTML boilerplate in it.
Step 2 − Now create a parent div container which contains the banner with the class name as “bannerCover”.
<div class="bannerCover"></div>
Step 3 − Now create a child container div which contains the banner content such as links and other data and add a class name as “banner”.
<div class="banner"></div>
Step 4 − Now add the link to the banner using HTML anchor tag.
<a href="https://www.tutorialspoint.com">tutorialspoint</a>
Step 5 − Now create a style.css file in the same folder and link the css file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 6 − Now target each and every element of HTML to style the banner.
.bannerCover {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.banner{
box-shadow: 0 0 5px gray;
padding:2rem;
border-radius: 5px;
text-align: center;
}
Step 7 − Target the anchor tag element and use the animation property to animate the link.
a {
text-decoration: none;
font-weight: 800;
font-size: 2rem;
color: green;
padding: 0 2rem;
animation: zoomup 1s linear alternate infinite;
}
Step 8 − Use the keyframe to make the banner link animated.
@keyframes zoomup{
0%{
font-size: 2rem;
}
25%{
font-size: 2rem;
}
50%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
75%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
100%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
}
Step 9 − The animated link is created successfully.
Example
In the above example we have built an animated link in the banner. For this we have created two files as index.html and stye.css.
<html>
<head>
<title> animated banner links</title>
<link rel="stylesheet" href="style.css">
<style>
.bannerCover {
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.banner{
box-shadow: 0 0 5px gray;
padding:2rem;
border-radius: 5px;
text-align: center;
}
a {
text-decoration: none;
font-weight: 800;
font-size: 2rem;
color: green;
padding: 0 2rem;
animation: zoomup 1s linear alternate infinite;
}
@keyframes zoomup{
0%{
font-size: 2rem;
}
25%{
font-size: 2rem;
}
50%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
75%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
100%{
font-size: 1.8rem;
border-radius: 5px;
padding: 0.2rem 0.5rem;
color: white;
background-color: red;
}
}
</style>
</head>
<body>
<div class="bannerCover">
<div class="banner">
<a href="https://www.tutorialspoint.com">tutorialspoint</a>
<p>(Click the above text to redirect to above page.)</p>
</div>
</div>
</body>
</html>
The given below image shows the output of the above example, by default the color of the link is white in color. In the below image there is a text in a banner as “tutorialspoint”, so when the user loads this feature to the browser and clicks to the red background content it redirects the user to the linked web page. The link in the banner is animated which zooms out and in, in the period of time.
Conclusion
As we have used the animated content in the above examples, it is necessary that the name in the animation property of CSS and the name of the animation in the keyframe are the same to perform animation on the particular element, otherwise the animation will not occur.
4K+ Views
To Continue Learning Please Login