Tạo hiệu ứng ripple material khi click đẹp và đơn giản cho Blogspot
tháng 7 01, 2018 #CSS #Javascript #Thủ Thuật BlogspotTrong bài viết này mình sẽ hướng dẫn các bạn mang hiệu ứng đó lên tất cả các template khác.
Các bước thực hiện
Thêm CSS vào trước]]></b:skin>
.flat-icon-button {Thêm script này vào trước
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: rgba(0, 0, 0, .3);
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 .5s linear;
animation: ripple-effect .5s 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)
}
}
</body>
<b:template-script async='true' name='indie' version='1.0.0'/>
Cách sử dụng
Hiệu ứng vuông: thêm classripple
vào bất cứ element nào.Hiệu ứng tròn: thêm class
ripple flat-icon-button
vào bất cứ element nào.Demo
CLICK ME!Đối với các Template mặc định của Blogspot trong phiên bản mới thì có một hiệu ứng khi click rất đẹp là splash ripple, hay còn gọi là material click.
Trong bài viết này mình sẽ hướng dẫn các bạn mang hiệu ứng đó lên tất cả các template khác.
Các bước thực hiện
Thêm CSS vào trước]]></b:skin>
.flat-icon-button {Thêm script này vào trước
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: rgba(0, 0, 0, .3);
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 .5s linear;
animation: ripple-effect .5s 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)
}
}
</body>
<b:template-script async='true' name='indie' version='1.0.0'/>
Cách sử dụng
Hiệu ứng vuông: thêm classripple
vào bất cứ element nào.Hiệu ứng tròn: thêm class
ripple flat-icon-button
vào bất cứ element nào.