【前端css】Chapter1：开关按钮

最新推荐文章于 2022-08-25 01:01:54 发布

两头大

最新推荐文章于 2022-08-25 01:01:54 发布

阅读量345

点赞数 1

分类专栏： # 前端css

本文链接：https://blog.csdn.net/chotin/article/details/104783416

版权

前端css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、简介

开始一个学习css的记录，附带代码。这是一个开关按钮，兼备开关显示灯。

2、代码

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>Checkbox UI Design</title>
</head>
<body>
    <label>
        <input type="checkbox" name=''>
        <span class="check"></span>
        <span class="btn"></span>
    </label>
    <label>
        <input type="checkbox" name='' checked='checked'>
        <span class="check"></span>
        <span class="btn"></span>
    </label>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        flex-direction: column;
        overflow: hidden;
        background-color: #191919;
    }
    label{
        position: relative;
        width: 240px;
        height: 80px;
        cursor: pointer;
        margin: 20px 0;
    }   
    label input{
        opacity: 0;
    }
    label .check{
        position: absolute;
        top:0;
        left: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        background-color: #101010;
        border-radius: 40px;
        box-shadow: 0 0 0 4px #101010;
    }
    label .check:before{
        content: '';
        position: absolute;
        top:calc(50%-4px);
        left: -30px;
        width:8px;
        height: 8px;
        border-radius: 50%;
        background: #f00;
        transition: 0.5s;
        box-shadow: 0 0 5px #f00,
                    0 0 10px #f00,
                    0 0 20px #f00,
                    0 0 40px #f00,
                    0 0 80px #f00;
    }
    label input:checked~ .check:before{
        background: #101010;
        box-shadow: none;
    }
    label .check:after{
        content: '';
        position: absolute;
        top:calc(50%-4px);
        right: -30px;
        width:8px;
        height: 8px;
        border-radius: 50%;
        background:#101010;
        transition: 0.5s;
        background: none;
    }
    label input:checked~ .check:after{
        background: #0f0;
        box-shadow: 0 0 5px #0f0,
                    0 0 10px #0f0,
                    0 0 20px #0f0,
                    0 0 40px #0f0,
                    0 0 80px #0f0;
    }
    label .btn{
        position:absolute;
        top:0;
        left: 0;
        width: 120px;
        height: 80px;
        border-radius: 40px;
        background: #333;
        transition: 0.5s;
        box-shadow: inset 0 -20 15px #292929,
                    inset 0 20px 15px #292929;
    }
    label .btn::before{
        content: '';
        position: absolute;
        top:0;
        left:0;
        width:52px;
        height: 80px;
        background: #252525;
        border-top-left-radius: 80px;
        border-bottom-left-radius: 80px;
        box-shadow: inset -5px -5px 15px rgba(0,0,0,.3);
        filter:blur(2px);
    }
    label .btn::after{
        content: '';
        position: absolute;
        top:0;
        right:0;
        width:52px;
        height: 80px;
        background: #252525;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        box-shadow: inset -5px -5px 15px rgba(0,0,0,.3);
        filter:blur(2px);
    }
    label input:checked ~ .btn{
        left:50%;
    }
</style>
</html>

两头大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【前端css】Chapter1：开关按钮

1、简介开始一个学习css的记录，附带代码。这是一个开关按钮，兼备开关显示灯。2、代码<!DOCTYPE html><html lang='en'><head> <meta charset="UTF-8"> <title>Checkbox UI Design</title></head&gt...
复制链接

扫一扫

专栏目录