纯css实现checkbox点击动画特效-html代码-BFW代码库

纯css实现checkbox点击动画特效

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>A checkbox animation</title>
    <style>
        *
        {
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        html, body
        {
            height: 100%;
        }

        body
        {
            margin: 0;
        }

        #_checkbox
        {
            display: none;
        }

        label
        {
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: #f72414;
            transform: translateY(-50%);
            border-radius: 50%;
            box-shadow: 0 7px 10px #ffbeb8;
            cursor: pointer;
            transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
            overflow: hidden;
        }

        label:before
        {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            width: 70px;
            height: 70px;
            margin: 0 auto;
            background-color: #fff;
            transform: translateY(-50%);
            border-radius: 50%;
            box-shadow: inset 0 7px 10px #ffbeb8;
            transition: 0.2s ease width, 0.2s ease height;
        }

        label:hover:before
        {
            width: 55px;
            height: 55px;
            box-shadow: inset 0 7px 10px #ff9d96;
        }

        label:active
        {
            transform: translateY(-50%) scale(0.9);
        }

        #tick_mark
        {
            position: absolute;
            top: -1px;
            right: 0;
            left: 0;
            width: 60px;
            height: 60px;
            margin: 0 auto;
            margin-left: 14px;
            transform: rotateZ(-.........完整代码请登录后点击上方下载按钮下载查看