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

đăng ngày: 28-08-2018 lúc 10:52
Tạo hiệu ứng ánh sáng đơn giản cho menu bằng CSS3

 269 lượt xem       5 lượt tải

Mô tả chi tiết

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.

 

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


 
  • light
  • speed
  • hover
  • effect

Đâ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;
}

Chúc các bạn thành công!

Hình ảnh


Hướng dẫn cài đặt

Vui lòng liên hệ để được hướng dẫn và hỗ trợ.

Thảo luận

Thông tin

Người đăng

tranquoc
Miễn phí 101 Code
Có phí 15 Code

Tags



Viết code như một Ninja

info@manguon.com.vn

Hotline: 0243 550 1189

DỊCH VỤ