Home >Web Front-end >CSS Tutorial >CSS3 method to draw dynamic link underline
CSS3 method to draw dynamic link underline
- 高洛峰Original
- 2017-03-07 14:19:101558browse
Link underlining is a very common style. I recently made a very simple visual effect, which is very good. Check out the complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background-color: #000;
}
h2{
text-align: center;
margin-top: 100px;
}
h2 > a {
position: relative;
color: #FFF;
text-decoration: none;
padding-bottom: 5px;
}
h2 > a:hover {
color: #FFF;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<h2>
<a href="/">悬停在我上面</a>
</h2>
</body>
</html>
Creating this effect is very simple, there is no need to add additional DOM elements to HTML, but you need to consider browser compatibility issues in older versions In your browser it will just show up as a plain underline.
Okay, now it officially begins. The first thing we need to do is remove the text-decoration and set the link to relative positioning. We need to ensure that the link does not change color when hovering. Here we take h2 as an example:
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
Next, we need to add a border and hide it through transformation. Insert a :before and set it scaleX (0). To be conservative, if the browser does not support it, we hide it with visibility: hidden.
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottombottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}Finally set the animation time to 0.3s. Now we only need to set the element to display when hovering and scaleX(1):
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
You're done!
This completes a very dynamic underline animation.
The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.
For more articles related to CSS3 methods for drawing dynamic link underlines, please pay attention to the PHP Chinese website!