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 {
    overflow: visible;
    pointer-events: none;
    width: 6em;
    height: auto
}

.check circle,.check polygon {
    transition: fill var(--trans-dur),stroke var(--trans-dur)
}

.check__move-fade,.check__scale-in,.check__scale-out,.check__stroke-offset {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.37,0,0.63,1);
    animation-fill-mode: forwards
}

.check__fade {
    transition: opacity var(--trans-dur)
}

.check__move-fade {
    animation-timing-function: cubic-bezier(0.61,1,0.88,1)
}

.field {
    display: flex;
    margin: auto
}

.field,.field__checkbox {
    -webkit-tap-highlight-color: transparent
}

.field__checkbox {
    -webkit-appearance: none;
    appearance: none
}

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