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

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

代码语言：html

所属分类：动画

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
    * {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --hue: 223;
    --sat: 10%;
    --bg: hsl(var(--hue),var(--sat),90%);
    --fg: hsl(var(--hue),var(--sat),10%);
    --primary: hsl(var(--hue),90%,50%);
    --green: hsl(150,90%,40%);
    --red: hsl(0,90%,50%);
    --purple: hsl(270,90%,60%);
    --white: hsl(0,0%,100%);
    --light-gray1: hsl(var(--hue),var(--sat),85%);
    --light-gray2: hsl(var(--hue),var(--sat),65%);
    --dark-gray1: hsl(var(--hue),var(--sat),35%);
    --dark-gray2: hsl(var(--hue),var(--sat),15%);
    --check-bubble: var(--light-gray1);
    --check-outline: var(--light-gray2);
    --trans-dur: .3s;
    font-size: clamp(1rem,0.95rem+0.25vw,1.25rem)
}

body {
    background-color: var(--bg);
    color: var(--fg);
    display: flex;
    font: 1em/1.5 sans-serif;
    height: 100vh;
    transition: background-color var(--trans-dur),color var(--trans-dur)
}

.check {
    overfl.........完整代码请登录后点击上方下载按钮下载查看