div+css实现立体开机关机开关按钮效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css实现立体开机关机开关按钮效果代码

代码标签: div css 立体 开机 关机 开关 按钮

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
    background: black;
    padding: 100px;
}
    .container {
        width: 150px;
        height: 130px;
        padding-top: 20px;
        margin: 50px auto
    }

    #power {
        position: absolute;
        left: -9999px
    }

    label {
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: relative;
        margin: auto;
        border: 4px solid #636679;
        background: -webkit-radial-gradient(center,ellipse cover,#efefef 0,#eee 80%,#fff 100%);
        background: -moz-radial-gradient(center,ellipse cover,#efefef 0,#eee 80%,#fff 100%);
        background: radial-gradient(center,ellipse cover,#fefefe 0,#eee 80%,#fff 100%);
        box.........完整代码请登录后点击上方下载按钮下载查看

网友评论0