Nếu bạn đang cần tạo một hiệu ứng mới mẻ và ấn tượng cho menu trên website khách hàng, hay của chính bạn thì hiệu ứng mà mình chia sẻ cho các bạn ngày hôm nay sẽ là một lựa chọn không nên bỏ qua. Hiệu ứng mà mình muốn chia sẻ được làm hoàn toàn bằng CSS3, và qua bài viết này, các bạn sẽ hiểu thêm về CSS3 cũng như có thêm một kiến thức mới cho mình.
HTML
- Code:
<ul>
<li>
<a>light</a>
</li>
<li>
<a>speed</a>
</li>
<li>
<a>hover</a>
</li>
<li>
<a>effect</a>
</li>
</ul>
CSS
- Code:
html {
font-size: 0.625rem;
font-family: 'Roboto Slab';
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
text-rendering: optimizelegibility;
background: crimson;
color: white;
}
ul {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
text-align: center;
font-size: 2.4rem;
text-transform: uppercase;
}
ul li {
display: inline-block;
margin: 0 3rem;
}
ul a {
position: relative;
cursor: pointer;
}
ul a:hover {
color: crimson;
}
ul a:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: -5;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%) skew(-89deg) scaleX(1.5);
-ms-transform: translateX(-50%) skew(-89deg) scaleX(1.5);
transform: translateX(-50%) skew(-89deg) scaleX(1.5);
opacity: 0;
background: #FFF45C;
-webkit-transition: all 0.3s cubic-bezier(0.42, 0.08, 0, 1.8);
transition: all 0.3s cubic-bezier(0.42, 0.08, 0, 1.8);
}
ul a:hover:after {
width: 140%;
-webkit-transform: translateX(-50%) skew(-20deg) scaleX(1);
-ms-transform: translateX(-50%) skew(-20deg) scaleX(1);
transform: translateX(-50%) skew(-20deg) scaleX(1);
opacity: 1;
}
