facebook like 按钮CSS特效

html

<div class="placement">
<div class="heart"></div>
</div>

 

scss:

 

.heart {
width: 100px;
height: 100px;
background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
background-position: 0 0;
cursor: pointer;
transition: background-position 1s steps(28);
transition-duration: 0s;

&.is-active {
transition-duration: 1s;
background-position: -2800px 0;
}
}

body {
background: #000000;
}

.placement {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

javascript:

$(function() {
$(".heart").on("click", function() {
$(this).toggleClass("is-active");
});
});

相关推荐

用纯CSS实现优雅的tab页

通常tab页的交互都是点击tab头然后展示对应的一块内容,这种排他性跟HTML里面的某个原住民很类似,是啥呢?没错!就是单选框组。 单选框组有一个:checked伪类,可以设定单选框被选中后的样式,所以我们要把一组单选框当做tab页的头部么?当然不是,单选框是很固执的,用CSS去感化他是很吃力的,那怎么办呢? 这里就要用到CSS里面的+选择器了[实际上这个选择器我之前从来没用过-_-||],简单来说+选择器就是选择紧跟在某个指定元素后面的另一个指定的元素,具体介绍请看

暂无评论

微信扫一扫,分享到朋友圈

facebook like 按钮CSS特效