jquery实现爱心点赞数字增加动画效果代码-html代码-BFW代码库

jquery实现爱心点赞数字增加动画效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现爱心点赞数字增加动画效果代码，鼠标点击试试。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Rubik");
    	body {
    	font-family:"Rubik",sans-serif
    }
    .container {
    	position:fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	right:0;
    	margin:auto;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	background-color:#F3FFBD
    }
    .love {
    	font-size:80px;
    	position:relative;
    	display:inline-block;
    	color:#FF1654;
    	top:-2px;
    	transition:all ease .2s;
    	text-shadow:0 4px 6px #af002f;
    	cursor:pointer
    }
    .love::after {
    	content:attr(data-count);
    	position:absolute;
    	top:2px;
    	right:-6px;
    	margin:auto;
    	font-size:14px;
    	background-color:#ce0037;
    	border-radius:400px;
    	color:#fff;
    	padding:4px;
    	font-weight:600;
    	min-width:26px;
    	min-height:26px;
    	text-align:center;
    	line-height:1.8;
    	transition:all cubic-bezier(0.76,0.76,0.05,0.98) .5s;
    	box-shadow:0 0 4px rgba(0,0,0,0.6)
    }
    .love.active {
    	top:0;
    	text-shadow:0 2px 2px #af002f
    }
    .love.active::after {
    	top:-6px
    }
    .love .up {
    	position:absolute;
    	height:50px;
    	width:10px;
    	top:0;
    	bottom:0;
    	right:0;
    	margin:auto;
    	transform:rotate(60deg);
    	opacity:1;
    	transition:all cubic-bezier(0.76,0.76,0.05,0.98).........完整代码请登录后点击上方下载按钮下载查看