css3动画巧用label

最新推荐文章于 2023-11-01 18:31:08 发布

weixin_30834783

最新推荐文章于 2023-11-01 18:31:08 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/qinglingyue/p/6110325.html

版权

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<style>
    html, body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    * {
        transition: all 1s ease
    }

    input[type=checkbox] {
        display: none
    }

    input[type=checkbox] + label {
        background-color: #040d1c;
        width: 200px;
        height: 80px;
        border-radius: 50px;
        display: block;
        padding: 10px;
        box-shadow: inset 5px 5px 20px rgba(0, 0, 0, 0.5);
        z-index: 5;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 80px);
        cursor: pointer;
    )
    }

    input[ type=checkbox] + label + section {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0f1f3a;
        z-index: -1
    }

    #a {
        width: 80px;
        height: 80px;
        border-radius: 100px;
        background-color: #f0f0f0;
        box-shadow: 0 0 100px rgba(255, 255, 255, 1)
    }

    input[ type=checkbox]:checked + label + section {
        background-color: #568eef;
    }

    input[ type=checkbox]:checked + label {
        background-color: #2a5fba;
    }

    input[ type=checkbox]:checked + label #a {
        margin-left: calc(100% - 80px);
        background: #f4e94e;
        box-shadow: 0 0 100px rgba(249, 240, 104, 1)
    }
</style>
<body>
<input type="checkbox" id="c"/>
<label for="c">
    <div id="a"></div>
</label>
<section>
</section>
</body>
</html>

转载于:https://www.cnblogs.com/qinglingyue/p/6110325.html