Tạo hiệu ứng splash ripple giống template mặc định

Các mẫu template mặc định mới sử dụng hiệu ứng splash ripple rất đẹp mắt, nếu bạn cũng muốn sử dụng hiệu ứng này trong mẫu template của bạn thì làm theo các bước sau


1. Tạo css trong <b:skin>


.flat-icon-button {

  background:transparent;

  border:0;

  outline:none;

  padding:8px;

  cursor:pointer;

  box-sizing:content-box;

  display:inline-block;

  line-height:0;

}

.flat-icon-button,.flat-icon-button .splash-wrapper {

  border-radius:50%;

}

.flat-icon-button .splash.animate {

  -webkit-animation-duration:0.3s;

  animation-duration:0.3s;

}

.flat-button {

  cursor:pointer;

  border-radius:2px;

  padding:8px;

}

.ripple {

  position:relative;

}

.ripple > * {

  z-index:1;

}

.splash-wrapper {

  bottom:0;

  left:0;

  overflow:hidden;

  pointer-events:none;

  position:absolute;

  right:0;

  top:0;

  z-index:0;

}

.splash {

  background:#aaaaaa;

  border-radius:100%;

  display:block;

  opacity:.9;

  position:absolute;

  -webkit-transform:scale(0);

  -ms-transform:scale(0);

  transform:scale(0);

}

.splash.animate {

  -webkit-animation:ripple-effect 0.4s linear;

  animation:ripple-effect 0.4s linear;

}

@-webkit-keyframes ripple-effect {

  100% {

    opacity:0;

    -webkit-transform:scale(2.5);

    transform:scale(2.5);

  }

}

@keyframes ripple-effect {

  100% {

    opacity:0;

    -webkit-transform:scale(2.5);

    transform:scale(2.5);

  }

}


Thay màu của class .splash background:#aaaaaa; thành màu mà bạn muốn

2. Chèn script mặc định của Blogger trước </body>

<b:template-script async='true' name='indie' version='1.0.0'/>

Ít hôm nữa mình sẽ lọc lấy đoạn script trong này

3. Cách sử dụng

+ Hiệu ứng góc tròn: thêm class flat-icon-button ripple ví dụ <a class='flat-icon-button ripple'></a>

+ Hiệu ứng góc vuông: thêm class flat-button ripple ví dụ <a class='flat-button ripple'></a>

4. Demo

DOWNLOAD   

Chấm hết bài

Post a Comment

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

Previous Post Next Post