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

Ngày đăng: 13/01/2017 15:35 Chiều

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

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

Logo hình .png
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