<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="light.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effect.js"></script>
</head>
<body>
<div id="wrapper">
<div class="red">
<input type="checkbox" name="switch" id="switch">
<label class="switch" for="switch"><!--<span></span>--></label>
</div>
</div>
</body>
</HTML>
вот мой html
css:
@font-face {
font-family: MrGrieves-Regular; /* Гарнитура шрифта */
src: url(fonts/MrGrieves-Regular.otf); /* Путь к файлу со шрифтом */
}
html {
height: 100%;
}
body {
height: 100%;
display: inline;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper {
height: 100%;
background: url(light.gif) no-repeat center bottom;
background-size: cover;
}
.switch {
display: block;
position: fixed;
width: 70px;
height: 100px;
margin-top: 170px;
margin-left: 900px;
border-radius: 70px;
background: #6A5928,
background: linear-gradient(#6A5928, #fdfdfd);
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
0 12px 13px rgba(49,18,14,.6);
cursor: pointer;
visibility: visible;
}
.switch:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;
background: #6A5928,
border-radius: inherit;
box-shadow:
0 1px 1px rgba(#aea391,0.2),
0 3px 3px rgba(170, 160, 140, 0.4),
0 0 5px rgba(170, 160, 140, 0.5);
}
.switch:after {
content: "";
width: 60px;
height: 70px;
border-radius: 50%;
z-index: -1;
left: 18px;
top: 10px;
background: #6A5928;
-webkit-filter: blur(10px);
}
#switch {
clip: rect(0 0 0 0);
visibility: hidden;
}
#switch:checked ~ .switch {
box-shadow:
0 -6px 5px rgba(196,196,196,.2),
0px 0px 5px rgba(49,18,14,.6);
border: 5px;
}
#switch:checked ~ .switch:after {
display: none;
}
.red { background:url(light2.gif) no-repeat center bottom;
background-size: cover;
visibility:hidden;
}
#off {
font-family: MrGrieves-Regular;
font-size: 80px;
margin:0;
margin-left: 720px;
margin-top: 120px;
position: absolute;
text-shadow:
7px 6px 15px rgba(196,196,196,.4),
12px 10px 15px rgba(49,18,14,.6);
}
#off:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;
background: #6A5928,
border-radius: inherit;
}
#off1 {
margin:0;
text-shadow:
7px 6px 15px rgba(196,196,196,.4),
12px 10px 15px rgba(49,18,14,.6);
}
#switch:checked ~ #off:before {
font-family: MrGrieves-Regular;
font-size: 80px;
margin:0;
margin-left: 720px;
margin-top: 120px;
text-shadow:
}
}
js:
var intputs = document.getElementsByName('switch');
for(var i = 0, l = inputs.length; i < l; i++){
inputs[i].onclick = function(){ document.getElementById('#klass').innerHTML = ''; }
}
$(function() {
2
var x = $('#wrapper').css('background');
3
var y = $('#wrapper > div').css('background');
4
$('#wrapper > div').on('click', function() {
5
$('#wrapper').css('background') == x ? $('#wrapper').css('background', y) : $('#wrapper').css('background', x);
6
});
7
});