Sự kiện

Tạo hiệu ứng ánh sáng đơn giản cho menu bằng CSS3

Danh mục: CSS
 

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.

css3, hover effect, lighting effect ,menu effect, hieu ung anh sang

HTML

Đầu tiên chúng ta cần khung chuẩn html cho menu như sau :

<ul>

  <li>

    <a>light</a>

  </li>

  <li>

    <a>speed</a>

  </li>

  <li>

    <a>hover</a>

  </li>

  <li>

    <a>effect</a>

  </li>

</ul>

CSS

Đây chính là phần chính của bài viết, để tạo hiệu ứng hover tuyệt đẹp cho menu, chúng ta cần đoạn css sau :

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;

}

Đó là tất cả những gì mà mình muốn chia sẻ cho các bạn ngày hôm nay, mình hy vọng là các bạn sẽ cảm thấy thích với hiệu ứng menu này.

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"