CSS Border Animation - Latest CSS3 Hover Effects Tutorial - CSS Quick Tips and Tricks
Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Border Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.
<a id="text-effect" href="javascript:">
<span></span>Hello word
</a>
#text-effect {
font-size: 30px;
color: #262626;
font-weight: bold;
text-transform: uppercase;
position: relative;
padding: 0 0 6px;
&:before,&:after,span {
content: "";
position: absolute;
height: 6px;
background-color: #262626;
}
span {
display: block;
left: 25%;
width: 50%;
bottom: 0;
height: 6px;
background-color:#fff;
-webkit-transform: .5s;
-ms-transform: .5s;
transform: .5s;
}
&:before {
bottom: 0;
left: 0;
width: 0%;
-webkit-transition: 2s;
-o-transition: 2s;
transition: 2s;
}
&:after {
bottom: -6px;
left: 25%;
width: 0%;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
-webkit-transition-delay:.5s;
-o-transition-delay:.5s;
transition-delay:.5s;
}
&:hover {
&:before {
width: 100%;
}
&:after {
width: 50%;
}
}
}