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>

Copy

.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   

Nội dung chính