一款纯CSS点亮和熄灭灯泡的特效,灯泡自身有一个无限摇摆的动画,点击灯泡可以点亮或熄灭,点亮灯泡时会出现发光的提示文字,喜欢的童鞋请收下把。
页面的head部分,需设置好灯泡点亮和熄灭时的不同样式,还有提示文字的发光样式等,部分代码如下:
html, body {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
font-style: bold;
font-size: 4.8vmin;
line-height: 4.8vmin;
color: rgba(255,238,188,0.8);
margin: 0;
padding: 0;
height: 100%;
background: rgba(66,39,71,1);
background: -moz-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66,39,71,1)), color-stop(73%, rgba(43,25,46,1)), color-stop(100%, rgba(19,11,20,1)));
background: -webkit-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
background: -o-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
background: -ms-linear-gradient(top, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
background: linear-gradient(to bottom, rgba(66,39,71,1) 0%, rgba(43,25,46,1) 73%, rgba(19,11,20,1) 100%);
}
a {
color: rgba(255,238,188,0.8);
}
#lampadario {
position: fixed;
left: 50%;
top: 0;
}
#filo {
position: relative;
background-color: #000000;
width: 2px;
height: 150px;
left: 50%;
margin-left: -1px;
z-index: 1;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
-moz-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
-ms-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
-o-animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
animation: oscillaFilo .9s ease-in-out 0s infinite alternate;
}
#filo:after {
content: " ";
left: -5px;
top: 100%;
position: absolute;
border-bottom: 15px solid #000000;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
width: 4px;
}
#lampadina {
position:relative;
}
input[value="off"]:checked ~
#filo {
-webkit-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
-moz-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
-ms-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
-o-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
}
input[value="off"]:checked ~
#filo:after {
-webkit-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
-moz-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
-ms-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
-o-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
}
input {
position: absolute;
width: 90px;
height: 70px;
top: 150px;
margin-left:-45px;
opacity: 0;
z-index: 1;
cursor: pointer;
}
input[value="on"] {
top: 150px;
}
input[value="off"] {
top: -100px;
}
input[value="on"]:checked {
top: -100px;
}
input[value="on"]:checked + input[value="off"] {
top: 150px;
}
label {
width: 51px;
height: 51px;
top: 164px;
position: absolute;
left: 0;
margin-left: -24px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-webkit-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
-moz-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
-ms-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
-o-animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
animation: oscillaLampadina .9s ease-in-out 0s infinite alternate;
}
input[value="off"]:checked ~
label {
background: rgba(255,255,255,0.03);
-webkit-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
-ms-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
-o-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
}
input[value="on"]:checked ~
label {
background: rgba(255,238,188,1);
-webkit-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
-moz-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
-ms-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
-o-box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
box-shadow: 0px 0px 10px rgba(255,238,188,0.8), 0px 0px 30px rgba(255,238,188,0.6), 0px 0px 50px rgba(255,238,188,0.6), 0px 0px 70px rgba(255,238,188,0.4), -80px -15px 120px 0px rgba(255,238,188,0.2);
}
页面的body部分,分别用了两个input radio来控制灯泡的不同状态,点亮时的文字放在div容器里,代码如下:
<div id="lampadario">
<input type="radio" name="switch" value="on" />
<input type="radio" name="switch" value="off" checked="checked" />
<label for="switch"></label>
<div id="filo"></div>
<div id="lampadina">
<div id="sorpresa">
<div id="footer">
点亮人生
</div>
<div id="shadow">
点亮人生
</div>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791