Facebook风格的表情化点赞按钮

Facebook like button Emoji Reaction 使用了velocity.js和velocity.ui.js

button

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2060
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var isAnimationEnable = 0;
var interVal;

$(document).ready(function() {

$(".showEmotions").hover(function() {

if (isAnimationEnable == 0) {
            $(".emoji-reactions").show().css('opacity', '1');
            $(".emoji-reactions span").velocity("transition.bounceUpIn", {
                stagger: 80
            });
            isAnimationEnable = 1;
            interVal = setInterval(function() {
                if (isAnimationEnable == 1) {
                    cursorListener();
                }
            }, 500);
        }

}, function() {

});

function cursorListener() {
        var isHovered = !!$('.emoji-reactions , .actionBox').
        filter(function() {
            return $(this).is(":hover");
        }).length;
        console.log(isHovered);
        if (!isHovered) {
            $(".emoji-reactions").velocity("transition.fadeOut", {
                delay: 1000
            });
            clearInterval(interVal);
            isAnimationEnable = 0;

}
    }

});

编译

CSS

html {
    background: #f1f1f1;
    -webkit-box-sizing: border-box -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif !important;
}
a {
    text-decoration: none;
    color: #000;
}
.center-align {
    width: 400px;
    margin: 30px auto;
    text-align: center;
}
.container {
    position: absolute;
    top: 220px;
    left: 50%;
    width: 500px;
    margin-top: -125px;
    margin-left: -250px;
    height: 250px;
}
footer {
    position: fixed;
    text-align: center;
    /* width: 100%; */
    
    display: inline;
    bottom: 10px;
    right: 0px;
}
footer a {
    padding-left: 10px;
    padding-right: 10px;
}
i {
    content: '';
    display: inline-block;
    height: 14px;
    margin: 0 6px -3px 0;
    width: 14px;
}
.like {
    background-image: url(https://i.imgsafe.org/0616248.png);
    background-repeat: no-repeat;
    background-size: 500px 488px;
    background-position: -277px -446px
}
.comment {
    background-image: url(https://i.imgsafe.org/0616248.png);
    background-repeat: no-repeat;
    background-size: 500px 488px;
    background-position: -262px -446px
}
.share {
    background-image: url(https://i.imgsafe.org/0616248.png);
    background-repeat: no-repeat;
    background-size: 500px 488px;
    background-position: -322px -446px;
}
.actionBox {
    position: relative;
    background: #fff;
    padding: 10px;
}
.actionBox span {
    color: #7f7f7f;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    margin-right: 20px;
    padding: 4px 4px 4px 0;
    cursor: pointer;
}
.clipDiv {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}
.emoji-reactions {
    left: -14px;
    position: absolute;
    top: -50px;
    z-index: 200;
    background: #fff;
    display: inline-block;
    font-size: 0;
    padding: 2px 10px;
    text-align: left;
    border-radius: 70px;
    white-space: nowrap;
    height: 49px;
    box-shadow: 0 8px 2px -6px rgba(0, 0, 0, 0.29);
    display: none;
}
.emoji-reactions span {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-backface-visibility: hidden;
    cursor: pointer;
    display: inline-block;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    transform: scale(1, 1) translateY(.0001px);
    transform-origin: 50% 100%;
    width: 48px;
}
.emoji-reactions span .reaction {
    transform: scale(.8, .8) translate(0, 0);
    transition: transform 200ms ease;
}
.reaction .react {
    display: block;
    height: 48px;
    image-rendering: crisp-edges;
    line-height: 1;
    width: 48px;
    background-image: url(https://i.imgsafe.org/c505d7a.png);
    background-size: 48px 384px;
}
.react.like {
    background-position: 0 -144px;
}
.react.love {
    background-position: 0 -192px;
}
.react.haha {
    background-position: 0 -96px;
}
.react.wow {
    background-position: 0 -288px;
}
.react.sorry {
    background-position: 0 -240px;
}
.react.anger {
    background-position: 0 0;
}
.react.dislike {
    background-position: 0 -144px;
    transform: rotate(180deg);
}
.emoji-reactions span .text {
    left: 50%;
    position: absolute;
    text-align: center;
    top: -28px;
    transform: translateX(-50%);
}
.emoji-reactions span .text div {
    background-color: rgba(0, 0, 0, .75);
    border-radius: 10px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    max-width: 100%;
    opacity: 0;
    overflow: hidden;
    padding: 0 8px;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: opacity 50ms ease;
}
.emoji-reactions span:hover .reaction {
    transform: scale(1, 1) translate(0, -6px);
}
.emoji-reactions span:hover .text div {
    opacity: 1;
}
.fb-post {
    width: 100%;
    background: #fff;
    height: 410px;
    background: url(https://i.imgsafe.org/aea1fb1.png) no-repeat;
    background-size: cover;
}
.instructions {
    font-size: 14px;
    position: relative;
    background: #000;
    color: #fff;
    display: inline-block;
    padding: 0px 15px;
    top: -9px;
}

HTML

<h2 class="center-align">Facebook like Emoji Reaction<br><p class="instructions">Hover "Like" Button for reactions</p></h2>
<div class="container">
    <div class="fb-post">
    </div>
    <div class="actionBox">
        <span class="showEmotions">
      <a class=""><i class="like"></i>Like</a>
       <div class="emoji-reactions">
      <span>
        <div class="reaction">
          <i class="react like"></i>
        </div>
        <div class="text">
          <div>Like</div>
        </div>
      </span>

<span>
        <div class="reaction">
          <i class="react sorry"></i>
        </div>
        <div class="text">
          <div>Sorry</div>
        </div>
      </span>

<span>
        <div class="reaction">
          <i class="react anger"></i>
        </div>
        <div class="text">
          <div>Angry</div>
        </div>
      </span>

<span>
        <div class="reaction">
          <i class="react dislike"></i>
        </div>
        <div class="text">
          <div>Dislike</div>
        </div>
      </span>

</div>

</span>
    <span><a><i class="comment"></i>Comment</a></span>
    <span><a><i class="share"></i>Share</a></span>
</div>
</div>

Facebook like button Emoji Reaction 使用了velocity.js和velocity.ui.js

button

编辑器支持Emmet

快捷键

Facebook like button Emoji Reaction 使用了velocity.js和velocity.ui.js

button

使用jQuery和WavesJS实现的一款原质化风格“回到顶部”按钮

使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：