css+svg实现checkbox勾选点击打钩动画美化效果代码-html代码-BFW代码库

css+svg实现checkbox勾选点击打钩动画美化效果代码

代码语言：html

代码描述：css+svg实现checkbox勾选点击打钩动画美化效果代码

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

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        * {
    	box-sizing:border-box;
    }
    .cbx {
    	-webkit-user-select:none;
    	user-select:none;
    	cursor:pointer;
    	padding:6px 8px;
    	border-radius:6px;
    	overflow:hidden;
    	transition:all 0.2s ease;
    }
    .cbx:not(:last-child) {
    	margin-right:6px;
    }
    .cbx:hover {
    	background:rgba(125,100,247,0.06);
    }
    .cbx span {
    	float:left;
    	vertical-align:middle;
    	transform:translate3d(0,0,0);
    }
    .cbx span:first-child {
    	position:relative;
    	width:18px;
    	height:18px;
    	border-radius:4px;
    	transform:scale(1);
    	border:2px solid #c8ccd4;
    	transition:all 0.2s ease;
    }
    .cbx span:first-child svg {
    	position:absolute;
    	top:2px;
    	left:1px;
    	fill:none;
    	stroke:#fff;
    	stroke-width:2;
    	stroke-linecap:round;
    	stroke-linejoin:round;
    	stroke-dasharray:16px;
    	stroke-dashoffset:16px;
    	transition:all 0.3s ease;
    	transition-delay:0.1s;
    	transform:translate3d(0,0,0);
    }
    .cbx span:last-child {
    	padding-left:8px;
    	line-height:18px;
    }
    .cbx:hover span:first-child {
    	border-color:#7d64f7;
    }
    .inp-cbx:checked + .cbx span:first-child {
    	background:#7d64f7;
    	border-color:#7d64f7;
    	animation:wave 0.4s ease;
    }
    .inp-cbx:checked + .cbx span:first-child svg {
    	stroke-dashoffset:0;
    }
    body {
    	font-family:"Open Sans",sans-serif;
    	font-size:16px;
    	-webkit-font-smoothing:antialiased;
    	text-rendering:optimizelegibility;
    	color:#223254;
    	min-height:100vh;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    .inline-svg {
    	position:absolute;
    	width:0;
    	height:0;
    	pointer-events:none;
    	user-select:none;
    }
    @media screen and (max-width:640px) {
    	body {
    	width:auto;
    	display:inherit;
   .........完整代码请登录后点击上方下载按钮下载查看