建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > CSS布局实例 >

纯CSS做的带开关的台灯

更新时间:2016-12-30整理编辑:建站学习网阅读:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
#info {text-align:center;}
#info h2 {width:750px; text-align:left;}

.off {cursor:pointer; background:#060; color:#ddd; font-size:12px;}
.off:hover {cursor:pointer; background:#060; color:#fff; font-size:12px;}


#switchbox2 {position:relative; width:200px; border:10px solid #697210; text-align:center; background:#060; margin:25px auto 100px auto;}
#toplight2 {display:block; width:70px; height:4px; font-size:1px; border-top:70px solid #888; border-left:65px solid #888; border-right:65px solid #888; background:#800;}
#leftback {display:block; width:30px; height:100px; background:#888; float:left;}
#leftlamp {display:block; width:35px; height:3px; font-size:1px; border-bottom:97px solid #c00; border-left:35px solid #888; float:left; background:#c00;}
#rightlamp {display:block; width:35px; height:3px; font-size:1px; border-bottom:97px solid #e00; border-right:35px solid #888; float:left; background:#c00;}
#rightback {display:block; width:30px; height:100px; background:#888; float:left;}
#botlight2 {clear:both; display:block; width:140px; height:4px; font-size:1px; border-bottom:40px solid #888; border-left:30px solid #888; border-right:30px solid #888; background:#800;}
#botback {display:block; width:200px; height:112px; background:#888;}
#stemtop {position:absolute; left:96px; top:178px; display:block; width:4px; height:15px; font-size:1px; background:#844; border-right:4px solid #a88;}
#stemtop2 {position:absolute; left:85px; top:193px; display:block; width:30px; height:3px; font-size:1px; background:#844; border-bottom:2px solid #422;}
#stemtop3 {position:absolute; left:85px; top:198px; display:block; width:20px; height:2px; font-size:1px; background:#422; border-top:5px solid #633; border-left:5px solid #888; border-right:5px solid #888;}
#stemtop4 {position:absolute; left:65px; top:205px; display:block; width:10px; height:2px; font-size:1px; border-bottom:100px solid #633; border-left:25px solid #888; background:#422;}
#stemtop5 {position:absolute; left:100px; top:205px; display:block; width:10px; height:2px; font-size:1px; border-bottom:100px solid #844; border-right:25px solid #888; background:#633;}
#stembase {position:absolute; left:60px; top:307px; display:block; width:40px; height:10px; font-size:1px; border-right:40px solid #844; background:#633;}
#table {position:absolute; left:10px; top:317px; display:block; width:180px; height:10px; font-size:1px; border-top:2px solid #aaa; background:#050;}

a#switch2 {display:block; text-decoration:none; color:#fff; background:#c00; font-size:12px;}
a#switch2:visited {text-decoration:none; color:#fff; background:#c00; font-size:12px;}
a#switch2:hover {text-decoration:none; color:#fff; background:#c00; font-size:12px;}

a#switch2:hover #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:hover #leftback {background:#ccc;}
a#switch2:hover #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:hover #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:hover #rightback {background:#ccc;}
a#switch2:hover #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:hover #botback {background:#f8f8f8;}
a#switch2:hover #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:hover #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:hover #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:hover #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:hover #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:hover #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:hover #table {border-top:2px solid #eee; background:#070;}

a#switch2:active #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:active #leftback {background:#ccc;}
a#switch2:active #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:active #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:active #rightback {background:#ccc;}
a#switch2:active #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:active #botback {background:#f8f8f8;}
a#switch2:active #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:active #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:active #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:active #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:active #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:active #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:active #table {border-top:2px solid #eee; background:#070;}

a#switch2:focus #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:focus #leftback {background:#ccc;}
a#switch2:focus #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:focus #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:focus #rightback {background:#ccc;}
a#switch2:focus #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:focus #botback {background:#f8f8f8;}
a#switch2:focus #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:focus #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:focus #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:focus #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:focus #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:focus #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:focus #table {border-top:2px solid #eee; background:#070;}


</style>

</head>
<body>

<div id="switchbox2">
<a id="switch2" href="#nogo">
<span id="toplight2"></span>
<span id="leftback"></span>
<span id="leftlamp"></span>
<span id="rightlamp"></span>
<span id="rightback"></span>
<span id="botlight2"></span>
<span id="botback"></span>
<span id="stemtop"></span>
<span id="stemtop2"></span>
<span id="stemtop3"></span>
<span id="stemtop4"></span>
<span id="stemtop5"></span>
<span id="stembase"></span>
<span id="table"></span>
&nbsp;ON&nbsp;</a><span class="off">OFF</span>
</div>


</body>
</html>

本文网址:https://www.dedexuexi.com/divcss/bj/1725.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
实现CSS3中的border-radius(边框圆角)示例代码
« 上一篇2016年12月30日
酷酷的变色菜单
2016年12月30日下一篇 »
  • CSS Wave滤镜用法示例
    0阅读
    CSS Wave滤镜可能很多朋友并不喜欢用,其实用的好了,可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式,使对象年上去像波浪一样。语法示例:filter:wave(add=add,freq=freq,lightst
  • CSS写的简单表格示例
    0阅读
    使用CSS写表格,不要有所怀疑,主要是对html结构进行css样式重定义,大家可以看看效果图,个人感觉还不错,感兴趣的朋友可以参考下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv=Conte
  • 纯CSS代码实现翻页
    0阅读
    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml xml:la...
  • 表格列表偶数列、奇数列的CSS样式示例
    0阅读
    表格列表CSS样式包括:偶数列、奇数列、鼠标经过时样式、标题列等等,在接下来的示例中将为大家完美呈现,感兴趣的朋友不要错过 HTML示例源代码: 复制代码 代码如下: table class=list_table
  • 用CSS3创建一个旋转可变色按钮
    0阅读
    先从HTML: div a class=button旋转按钮/a /div 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none...
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录