鼠标经过底部下划线从中间放大的动画
2021-06-21 本文已影响0人
sunxiaochuan
资料
参考代码：Base Element（可在线查看）
正文
源码
<head>
<base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
This link will be opened in a new tab:
<a href="https://freecodetools.org/">
Free Code Tools
</a>
<p>
Read more: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
MDN Documentation
</a>
</p>
</div>
/* Please ❤ this if you like it! */
.wrapper {
text-align: center;
padding: 0 15px;
background-color: #173446;
color: white;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
font-size: 1.4em;
}
a {
color: #999;
position: relative;
}
a:after {
background-color: #999;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: all .3s ease-in-out 0s;
visibility: hidden;
width: 100%;
}
a:hover:after {
transform: scaleX(1);
visibility: visible;
}
