How to make cool underline effect using CSS animation
In this blog post, we'll dive into an intriguing example of creating an animated underline effect for text using HTML and CSS. This effect can significantly enhance the visual appeal of web elements, such as headings or clickable text, by introducing a dynamic component that captures user attention. The provided code snippet demonstrates how to implement this animation for a simple "Loading..." text, but the principles can be applied broadly across different web elements.
HTML Structure
The HTML part of the example is straightforward. It defines a basic webpage structure, including a link to an external CSS file named underline.css, which presumably contains the styling and animation details for the underline effect. The body of the HTML contains a single heading (<h1>) element with the class load, displaying the text "Loading...".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="underline.css">
<title>Underline Animation</title>
</head>
<body>
<h1 class="load">Loading...</h1>
</body>
</html>
CSS Styling and Animation
The CSS part is where the magic happens, defining the overall styling and the underline animation.
Global and Body Styling
The * selector is used to apply a universal style across all elements, setting the text color to white. The body selector styles the webpage's background to black, centers content, and ensures the body takes up the full viewport height.
* {
color: white;
}
body {
background: black;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.load Class Styling
The .load class applies to the <h1> element, positioning it relatively for the absolute positioning of the pseudo-element that will serve as the underline. The translate property seems to be intended for centering, but it's incorrectly specified and not necessary given the grid display on the body. The correct property for adjusting the position of an element would be transform, and its correct usage would be within a context where its effect is desired.
.load {
position: relative;
text-align: center;
max-width: 70px;
cursor: pointer;
}
Underline Animation
The real highlight is the :after pseudo-element of the .load class, which creates the animated underline effect. Here's a breakdown of its components:
- Content and Positioning: It's an empty element (content: "";) positioned absolutely at the bottom of the .load element.
- Appearance: It has a height of 6px, a slightly rounded border for a softer look, and a vibrant aqua color.
- Animation: Initially scaled to 0 (transform: scale(0);), it grows twice its size horizontally (transform: scaleX(2);) during the animation. The transition property is set for a smooth effect, though it's not necessary alongside the animation and can be removed to clean up the code.
- Keyframes: The @keyframes load defines the animation, scaling the underline to twice its initial width
.load:after {
content: "";
position: absolute;
height: 6px;
border-radius: 10%;
width: 100%;
background: aqua;
bottom: -2px;
left: 50%;
transform: scale(0);
transition: all ease-in-out 1.5s;
animation: load 1.5s infinite ease-out alternate;
}
@keyframes load {
100% {
transform: scaleX(2);
}
}
Final css code
/* link this code with html defalult fine name with html is underline.css */
*{
color: white;
}
body{
background: black;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.load{
position: relative;
text-align: center;
max-width: 70px;
cursor: pointer;
translate: -50% -50%;
}
.load:after{
content: "";
position: absolute;
height: 6px;
border-radius: 10%;
width: 100%;
background: aqua;
bottom: -2px;
left:50%;
/* translate: 50%; */
transform: scale(0);
transition: all ease-in-out 1.5s ;
animation: load 1.5s infinite ease-out alternate;
}
@keyframes load{
100%{ /* background: aqua; */
transform: scaleX(2);
}
} *{
color: white;
}
body{
background: black;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.load{
position: relative;
text-align: center;
max-width: 70px;
cursor: pointer;
translate: -50% -50%;
}
.load:after{
content: "";
position: absolute;
height: 6px;
border-radius: 10%;
width: 100%;
background: aqua;
bottom: -2px;
left:50%;
/* translate: 50%; */
transform: scale(0);
transition: all ease-in-out 1.5s ;
animation: load 1.5s infinite ease-out alternate;
}
@keyframes load{
100%{ /* background: aqua; */
transform: scaleX(2);
}
} *{
color: white;
}
body{
background: black;
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
.load{
position: relative;
text-align: center;
max-width: 70px;
cursor: pointer;
translate: -50% -50%;
}
.load:after{
content: "";
position: absolute;
height: 6px;
border-radius: 10%;
width: 100%;
background: aqua;
bottom: -2px;
left:50%;
/* translate: 50%; */
transform: scale(0);
transition: all ease-in-out 1.5s ;
animation: load 1.5s infinite ease-out alternate;
}
@keyframes load{
100%{ /* background: aqua; */
transform: scaleX(2);
}
}
Conclusion
This example showcases a creative way to add visual interest to web pages through CSS animations. The animated underline effect not only draws attention but also provides a dynamic feel to static elements like headings. With minor adjustments for accuracy and performance, such as fixing the translate property misuse and removing unnecessary transition definitions when using animations, this technique can be a valuable addition to any web developer's toolkit.
Thanks to visit this page if you have an suggestion or question you can ask through Comment
0 comments:
Post a Comment