Есть много вариаций, где при входе на страницу, вам нужно включить свет, это делается для того, чтоб можно было все корректно наблюдать. Ведь по умолчанию мы наблюдаем темную гамму, и для этого специально создается выключатель, но в нашем случай также идет включатель.
Мы по умолчанию видим провод с лампочкой на темном фоне, а рядом как раз то включатель, где нужно навести курсор и кликнуть, где сразу автоматически становится светло , так как лампочка начинает светить. Это больше такой трюк, что можно реализовать под тематику или под информацию, которая открыта, но чтоб ее прочесть вы включаем освещение.
Так при входе смотрится:
Здесь мы включили питание и во чудо, лампочка стала светится:
Установка:
HEAD
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
HTML
Код
<div id="sampa-konteynus">
<div id="waistband"></div>
<div id="soyedineniye"></div>
<div id="veneye-gnezdog"></div>
<div id="snizu-gnezdos"></div>
<div id="gnezdo-nazad"></div>
<div class="alampochka" id="bulb-top"></div>
<div class="alampochka" id="bulb-bottom"></div>
</div>
<div id="kereucal-konteyn">
<div id="kuchatel-perepleta">
<div class="anglekosem"></div>
<div id="pereklyuca"></div>
<div class="anglekosem"></div>
</div>
</div>
CSS
Код
#kereucal-konteyn {
width: 20%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#sampa-konteynus {
width: 40%;
height: 100vh;
align-self: center;
}
#kuchatel-perepleta {
background: #3d3b3c;
width: 80px;
height: 120px;
border-radius: 5px 5px;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0px 0px 5px black;
}
.anglekosem {
width: 5px;
margin: 10px;
height: 5px;
background: #2f2f2f;
border-radius: 50%;
}
#pereklyuca {
background: linear-gradient(#3d3b3c, #2f2f2f);
position: relative;
width: 40px;
height: 60px;
border-bottom: 1px solid black;
border-top: 5px solid #1f1f1f;
border-right: 1px solid black;
border-left: 1px solid black;
cursor: pointer;
transition: all .1s ease-Out;
}
#waistband {
width: 10px;
background: #3d3b3c;
height: 200px;
display: block;
margin: 0 auto;
}
#soyedineniye {
width: 15px;
height: 15px;
background: #211f1f;
margin: 0 auto;
border-radius: 15px 15px 0 0;
margin-top: -5px;
}
#veneye-gnezdog {
width: 50px;
height: 20px;
margin: 0 auto;
background: #312e2d;
border-radius: 50px 50px 0 0;
margin-top: -3px;
border-bottom: 1px solid #282626;
}
#snizu-gnezdos {
width: 50px;
height: 30px;
margin: 0 auto;
background: #312e2d;
}
#gnezdo-nazad {
margin: 0 auto;
width: 50px;
height: 10px;
background: #1d1d1d;
border-radius: 50%;
margin-top: -5px;
opacity: .5;
}
#bulb-top {
width: 46px;
height: 30px;
background: #050513;
margin: 0 auto;
margin-top: -8px;
border-radius: 10px 10px 0 0;
}
#bulb-bottom {
width: 80px;
height: 80px;
margin: 0 auto;
background: #050513;
border-radius: 50%;
margin-top: -15px;
}
.bglightOn {
background: #bfbda4;
transition: all .3s ease-Out;
}
#kereucal-konteyn .cover-shadow {
box-shadow: 0px 0px 5px #717171;
}
#kereucal-konteyn .pereklyuca-color {
background: #deded2;
}
#kereucal-konteyn .pereklyuca-border {
background: linear-gradient(#cecec3, #deded2);
border-bottom: 5px solid #737373;
border-top: 1px solid #888;
border-right: 1px solid #888;
border-left: 1px solid #888;
}
#kereucal-konteyn .anglekosem-color {
background: #bfbfb5;
}
#sampa-konteynus .bulbLightOn {
background: #deded2;
box-shadow: 0px 8.5px 24px 3px #deded2;
}
JS
Код
$('#pereklyuca').click(function() {
$('#kuchatel-perepleta').toggleClass('cover-shadow');
$('#kuchatel-perepleta, #pereklyuca').toggleClass('pereklyuca-color');
$('.anglekosem').toggleClass('anglekosem-color');
$('#pereklyuca').toggleClass('pereklyuca-border');
$('body').toggleClass('bglightOn');
$('.alampochka').toggleClass('bulbLightOn');
});
Теперь вы можете реализовать эффект переключателя в виде лампочки.
Демонстрация
