Tạo Hiệu Ứng Ripple Cực Nhẹ Và Đẹp Cho Blogspot

Thì Ripple là một hiệu ứng chắc ai dùng Blogspot củng biết rồi nhỉ ? Cái hiệu ứng này mình đã viết một bài về nó, nhưng cách đó là sử dụng Ripple có sẳn của Blogspot. Nhưng khi dùng Ripple mặc định của Blogspot thì sẽ phải khai báo 1 thư viện JS lớn từ Blogspot, và có nhiều thứ dư thừa khi không dùng đến, điều đó làm Blogspot của bạn nặng nề hơn trong việc load trang.

Các bước thực hiện

Tìm thẻ đóng </body> và đặt sau nó đoạn code này.

<script src='//cdn.jsdelivr.net/gh/dangtiensi/siben@3e73bd4e2ea1575aa5145b43f3993dd22fac01f7/ripple.js'></script>
<style>
a.ripple:hover{color:#707070}
.flat-icon-button{background:transparent;border:0;outline:none;padding:0;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:.3s;animation-duration:.3s}
.flat-button{cursor:pointer;border-radius:2px;padding:8px}
.ripple{position:relative}
.splash-wrapper{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:0}
.ink{background:rgba(0,0,0,.3);border-radius:100%;display:block;opacity:.9;position:absolute;transform:scale(0);-webkit-transform:scale(0);-moz-transform:scale(0)}
.fade-out{transform:opacity(0);-webkit-transform:opacity(0);-moz-transform:opacity(0)}
.ink.animate{animation:ripple 0.65s forwards;-webkit-animation:ripple 0.65s forwards;-moz-animation:ripple 0.65s forwards}
.ink.animate.end{transition:all 0.5s ease-in-out;background-color:rgba(255,0,0,0.0);box-shadow:none;border-radius:0}
@-webkit-keyframes ripple{
  100%{-webkit-transform:scale(2.5);transform:scale(2.5)}
}
@-moz-keyframes ripple{
  100%{-moz-transform:scale(2.5);transform:scale(2.5)}
}
@keyframes ripple{
  100%{transform:scale(2.5);-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}
}
</style>

Cách sử dụng

Thêm ripple hoặc ripple flat-icon-button vào thuộc tính class để sử dụng hiệu ứng nha.

Demo

Test Ripple

Lời kết

Chúc các bạn có một ngày vui vẻ :P