开关点亮效果-html代码-BFW代码库

开关点亮效果

代码语言：html

所属分类：动画

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

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

    <title> Light Switch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Variables */
        /**/
        /* Reset */
        *, *::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all .025s;
        }

        /* Generic */
        body {
            overflow: hidden;
        }

        .flex {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main {
            background-image: radial-gradient(circle, #C6C6CE, #D6D6DE);
            width: 100%;
            height: 100vh;
        }

        .switch {
            position: relative;
            width: 370px;
            height: 280px;
            border-radius: 50px;
            background-image: linear-gradient(totop, #D5BFBD 30%, #FFFFFF);
            box-shadow: 0 10px 15px #98849b;
            z-index: 1000;
            cursor: pointer;
        }
        .switch__g {
            width: 360px;
            height: 270px;
            background-color: #E7E7E7;
            border-radius: 44px;
        }
        .switch__button {
            flex-direction: column;
            width: 210px;
            height: 150px;
            border-radius: 8px;
            background-image: linear-gradient(totop, #D5BFBD 50%, #FFFFFF);
            border: 1px solid #BDB5BD;
        }
        .switch__tap {
            position: relative;
            width: 204px;
            height: 126px;
            background-color: #ECECEC;
            border-radius: 8px;
            box-shadow: 0 2px 5px #b4b4b4;
            z-index: 100;
        }
        .switch__led {
            position: relative;
            width: 204px;
            height: 16px;
            border-radius: 8px;
            background-color: #D5BFBD;
        }
        .switch__led-i {
            width: 25px;
            height: 4px;
            border-radius: 10px;
            background-color: #40CE98;
        }

        .shadow {
            position: absolute;
            top: 50%;
            width: 370px;
            height: 200px;
            background-image: linear-gradient(tobottom, #98849b, rgba(152, 132, 155, 0));
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 25px;
        }

        /* Modificadore */
        .m-night {
            background-image: radial-gradient(circle, #032234, #000f18);
        }

        .s-night {
            background-image: linear-gradient(totop, #8A4B90, #416491 40%, #416491 85%, #9EC6B8);
            box-shadow: 0 10px 15px #000f18;
        }

        .g-night {
            background-image: linear-gradient(tobottom, #487492, #564A91 90%);
        }

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