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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Năm, 7 tháng 2, 2019 -

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

Tag:
0 Like
10 Comment More Emoticon

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin