html5 canvas实现开灯关灯_HTML5+CSS3

内容介绍

canvas实现开灯关灯,效果非常的不错，分享给大家学习一下。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
    @import url(http://weloveiconfonts.com/api/?family=entypo);
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #lamp {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    input[name="switch"],
    input[name="switch"] + label {
        position: absolute;
        bottom: 3rem;
        width: 4rem;
        height: 4rem;
    }
    
    input[name="switch"] + label {
        right: 3rem;
    }
    
    input[name="switch"] {
        opacity: 0;
        z-index: 9;
        cursor: pointer;
    }
    
    input[value="on"] {
        right: 3rem;
    }
    
    input[value="off"] {
        right: -4rem;
    }
    
    input[name="switch"] + label {
        text-align: center;
    }
    
    [class*="entypo-"]::before {
        line-height: 4rem;
        font-size: 2.5rem;
        color: rgba(255, 255, 255, 0.4);
        font-family: 'entypo', sans-serif;
    }
    
    input[value="on"]:checked {
        right: -4rem;
    }
    
    input[value="on"]:checked + input[value="off"] {
        right: 3rem;
    }
    
    .lamp {
        position: relative;
        margin: 0 auto;
        width: .7rem;
        height: 10rem;
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
        background-repeat: no-repeat;
        background-size: .15rem 8rem, .4rem .8rem, .7rem 2rem;
        background-position: 50% 0, .19rem 8rem, 0 8.8rem;
    }
    
    .lamp::before,
    .lamp::after {
        content: '';
        position: absolute;
    }
    
    .lamp::before {
        left: -1.65rem;
        bottom: -4rem;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.07);
        transition: all .15s;
    }
    
    .gonna-give-light,
    .gonna-give-light::before {
        position: absolute;
    }
    
    .gonna-give-light {
        top: 10.05rem;
        left: .25rem;
        width: 0;
        height: 1.5rem;
        border-right: .2rem solid rgba(255, 255, 255, 0.05);
    }
    
    .gonna-give-light::before {
        content: '';
        top: 1.5rem;
        left: -.35rem;
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
        border: .2rem solid rgba(255, 255, 255, 0.05);
        box-shadow: 0px 0px 50px rgba(255, 255, 255, 0);
    }
    
    input[value="on"]:checked ~ .lamp::before {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.8), 0px 5px 50px rgba(255, 255, 255, 0.8), 0px 8px 80px rgba(255, 255, 255, 0.6), 0px 8px 120px rgba(255, 255, 255, 0.6);
    }
    
    body {
        background: #2f323c;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

html5 canvas实现开灯关灯

内容介绍

最新推荐

本周排行