Thứ Sáu, ngày 04 tháng 12 năm 2015

Share Hiệu Ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo

Mình cũng chưa từng làm site nào mà áp dụng hiệu ứng CSS3 Đẹp và Độc Đáo như thế này.
Nếu những ai đang xem bài viết này thấy nó phù hợp với trang của mình thì hãy sử dụng.
Hiệu ứng này tương đối nhẹ mình có để DEMO trực tiếp ở bên dưới.
Cái hiệu ứng CSS3 này khá teen phù hợp cho các site chat play nhạc video rất Dễ Thương.












Bên trên là DEMO trực tiếp về hiệu ứng Preload CSS3 quá Đẹp. Nếu các bạn muốn sử dụng thì Coppy mã HTML và CSS bên dưới vào web của các bạn

CSS
.wrapper {
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  background: #e7f0f7;
}
.progressbar {
  display: block;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  height: 30px;
}
.progressbar::before,
.progressbar::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);
  background-position: 0 0;
  background-repeat: repeat-x;
  -webkit-animation: movebar 5s linear infinite;
          animation: movebar 5s linear infinite;
}
.progressbar::before {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.1);
}
.progressbar::after {
  z-index: 9;
  top: 6px;
  -webkit-filter: blur(16px);
          filter: blur(16px);
  opacity: 0.7;
}
.stylization {
  position: absolute;
  z-index: 999;
  height: 4px;
  width: 90%;
  left: 5%;
  top: 6px;
  opacity: 0.3;
}
.stylization::before,
.stylization::after {
  content: '';
  display: block;
  position: absolute;
  height: 4px;
  top: 0;
  border-radius: 2px;
}
.stylization::before {
  background: #fff;
  left: 0;
  right: 10px;
}
.stylization::after {
  width: 6px;
  background: #fff;
  right: 0;
}
@-webkit-keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
@keyframes movebar {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}
HTML
<div class="wrapper">
  <div class="progressbar">
    <div class="stylization"></div>
  </div>
</div>
Nếu thấy thích thì like hoặc nếu coppy bị lỗi thì comment