Ngày đăng: 13/01/2017 15:35 PM

CSS3 làm hiệu ứng trắng xẹt ngang logo

CSS3 làm hiệu ứng trắng xẹt ngang logo, giúp website thêm sinh động và có điểm nhấn cho website

Hôm nay, HWP.com.vn xuất bản “bí kiếp” dùng CSS 3 làm hiệu ứng trắng xẹt ngang logo. Hiệu ứng này thay thế dùng Flash làm hiệu ứng trong những năm trước. Bây giờ Flash không còn sử dụng cho trình duyệt website nữa

CSS3 làm hiệu ứng trắng xẹt ngang logo

Để làm hiệu ứng trắng xẹt ngang logo bằng CSS 3 ta cần chuẩn bị 

  1. Logo hình .png
  2. Dùng CSS làm thuộc tính background hiện logo

Hoàn tất bằng 2 bước như sau:

Bước 1: Dùng CSS làm hiện logo cho website

HTML: <a class=”logo” href=”https://hwp.com.vn”>thiết kế website bằng wordpress</a>
CSS: 
.logo {
  position: absolute;
 top: 50%; transform: translateY(-50%);
 font-size: 0;
 left: 0; cursor:
 pointer;
 background: url(https://hwp.com.vn/wp-content/uploads/2016/08/logo.png);
 background-size: cover;
 overflow: hidden;
 width:256px;
 height:47px;
}

Bước 2: Dùng CSS3 co hiệu ứng xẹt ngang
CSS:
.logo:after {
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, #fff 60%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, #fff 60%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, #fff 60%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
position: absolute;
left: -16%;
top: -75%;
width: 152%;
height: 230%;
z-index: 2;
content: “”;
opacity: .5;
transform: rotate(30deg);
}

@-webkit-keyframes placeHolderShimmer {
from {
background-position: -468px 0
}
to {
background-position: 468px 0
}
}
@keyframes placeHolderShimmer {
from {
background-position: -468px 0
}
to {
background-position: 468px 0
}
}

Đã hoàn tất bài viết hướng dẫn, hãy link và share bài viết này nếu bạn thấy hữu ích nhé: CSS3 làm hiệu ứng trắng xẹt ngang logo

Đánh giá của bạn

Đăng bởi: | Ngày cập nhật: