验证中...
Languages: HTML
Categories: CSS 技巧
Latest update 2019-07-12 11:17
CSS3动态开关(JQuery用来做垂直、水平居中的,可以忽略)
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body {
background: #272f42;
}
/* 隐藏input */
#select {
display: none;
}
.main {
width: 150px;
height: 50px;
}
.btn {
width: 130px;
height: 50px;
border-radius: 50px;
box-shadow: 0px 5px 3px rgb(17, 17, 17) inset,
0px -1px rgb(102, 102, 102) inset;
background: #1e2635;
cursor: pointer;
position: relative;
}
.round {
width: 48px;
height: 48px;
border-radius: 50%;
background: #212a36;
float: left;
box-shadow: 2px 0px 2px rgb(17, 17, 17) inset,
-1px 0px 1px rgb(75, 74, 74) inset;
position: absolute;
top: 1px;
left: 2px;
transition: all .4s;
/* 设置过渡 */
}
.lamp {
width: 20px;
height: 20px;
float: right;
border-radius: 50%;
box-shadow: 0px -2px 4px rgb(17, 17, 17) inset;
background: #212b3a;
position: absolute;
top: 15px;
left: 160px;
transition: all .4s;
}
/* 选中input时,改变样式 */
input:checked~.label .btn .round {
background: #2e3d50;
box-shadow: 2px 0px 3px rgb(20, 20, 20) inset,
-1.3px 0px 1px #b4f2fd inset;
position: absolute;
top: 1px;
left: 81px;
}
input:checked~.lamp {
background: #b4f2fd;
box-shadow:
0px 1px 12px #b4f2fd,
0px -1px 12px #b4f2fd,
1px 0px 12px #b4f2fd,
-1px 0px 12px #0d9bb4;
}
</style>
<body>
<div class="main">
<!-- 选择框,display隐藏,用来触发:checked选择器 -->
<input type="checkbox" id="select">
<!-- 包裹开关按钮,点击选中checkbox,for与input的id相同 -->
<label for="select" class="label">
<!-- 左侧的按钮 -->
<div class="btn">
<div class="round"></div>
</div>
</label>
<!-- 右侧的灯 -->
<div class="lamp"></div>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//初始化
auto();
//当浏览器被重置大小时执行
window.onresize = function () {
auto();
};
//获取浏览器高度,使元素水平/垂直居中与浏览器
function auto() {
var winW = $(window).width();
var winH = $(window).height();
$(".main").css({
position: "absolute",
left: (winW - $(".main").outerWidth()) / 2,
top: (winH - $(".main").outerHeight()) / 2
});
}
})
</script>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search