css实现点赞收藏按钮点击数字动画效果代码-html代码-BFW代码库

css实现点赞收藏按钮点击数字动画效果代码

代码语言：html

代码描述：css实现点赞收藏按钮点击数字动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        /*#ff3c41*/
        /*#444857*/
        
        :root {
        	--u: 1.5vmin;
        	--clr: #777;
        	--bg: #444857;
        }
        body {
        	margin: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        	background-color: #131417;
        	background-image: linear-gradient(315deg, #131417 0%, #1e1f26 74%);
        }
        
        .button {
        	position: relative;
            width: calc(var(--u) * 10);
            height: calc(var(--u) * 10);
        }
        
        input { display: none; }	
        
        label {
            background: var(--bg);
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: calc(var(--u) * 1.5);
        	cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        label:before {
            content: "49";
            position: absolute;
            min-width: 50%;
            left: 25%;
            text-align: center;
            top: 0;
        	bottom: 0;
            background: var(--bg);
            border-radius: calc(var(--u) * 2);
            font-size: calc(var(--u) * 2);
            font-family: Arial, Helvetica, serif;
            padding: calc(var(--u) * 0.5);
            box-sizing: border-box;
            color: var(--clr);
            line-height: calc(var(--u) * 2.25);
            z-index: -1;
        	transition: all 0.5s ease 0s;
        	animation: counter-bot 1s ease 0s;
        }
        
        input:checked + label:before {
            content: "50";
            color: #fff;
        	background: #ff3c41; 
        	
        	bottom: inherit;
        	transition: all 0.5s ease 0s;
        	animation: counter-top 1s ease 0s;
        }
        
        @keyframes counter-top {
        	70% { top: calc(var(--u) * -4.75); }
        }
        
        @keyframes counter-bot {
        	70% { 
        		top: inherit; 
        		bottom: calc(var(--u) * -5); 
        	}
        }
        
        
        label:after {	
        	content: "";
            width: calc(var(--u) * 8);
            height: calc(var(--u) * 8);
            position: absolute;
            border-radius: 100%;
            box-sizing: border-box;
            z-index: -2;
            animation: disc-gray 1s ease 0s, spin-gray 0.65s ease-in-out 0.25s;
            transform: rotate(0deg);
        	--pos: 95%;
            background: 
        		radial-gradient(circle at 50.........完整代码请登录后点击上方下载按钮下载查看