Chuẩn bị
Để tạo các hiệu ứng cho Icon, bạn cần sử dụng Font Awesome và mo.js. Chèn đoạn mã sau vào trước </head>
.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Mặc dù mo.js hoàn toàn là JavaScript, nhưng để tiện sử dụng, bạn nên dùng thêm jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
HTML
<button class="icobutton">
<span class="fa fa-thumbs-up"></span>
</button>
CSS
.icobutton {
font-size: 5em;
position: relative;
margin: 0;
padding: 0;
color: #c0c1c3;
border: 0;
background: none;
overflow: visible;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.icobutton:hover, .icobutton:focus {
outline: none;
}
JavaScript (jQuery)
var scaleCurve = mojs.easing.path('M0, 100 L25, 99.9999983 C26.2328835, 75.0708847 19.7847843, 0 100, 0');
var el = document.querySelector('.icobutton'),
elSpan = el.querySelector('span'),
timeline = new mojs.Timeline(),
tween1 = new mojs.Burst({
parent : el,
duration : 1500,
shape : 'circle',
fill : ['#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE'],
opacity : 0.6,
childOptions : {radius : {20 : 0}},
radius : {40 : 120},
count : 6,
isSwirl : true,
easing : mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
tween2 = new mojs.Transit({
parent : el,
duration : 750,
type : 'circle',
radius : {0 : 50},
fill : 'transparent',
stroke : '#988ADE',
strokeWidth : {15 : 0},
opacity : 0.6,
easing : mojs.easing.bezier(0, 1, 0.5, 1)
}),
tween3 = new mojs.Tween({
duration : 900,
onUpdate : function(progress) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ', ' + scaleProgress + ', 1)';
}
});
timeline.add(tween1, tween2, tween3);
el.addEventListener('click', function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).css('color', 'rgb(192, 193, 195)');
} else {
timeline.replay();
$(this).addClass('active');
$(this).css('color', 'rgb(152, 138, 222)');
}
});
Các bạn có thể tham khảo thêm rất nhiều hiệu ứng khác tại đây. Chúc các bạn thành công!
Bình Luận