纯CSS做的带开关的台灯

<!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>

时间: 2024-08-26 07:45:11

纯CSS做的带开关的台灯的相关文章

纯CSS无图片带箭头的DIV方框

<html> <head> <title>纯CSS无图片带箭头的DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{

纯CSS如何实现带动画的天气图标

静态的天气图标看久了显得呆板,那么下面就分享一个很有才创意的用CSS实现天气带动画的天气图标,代码都分享出来,以这个例子作为参考希望你能得到启发.enjoy! 下面我们来做一个会下雨的天气图标实例,过程其实很简单哦. STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> <div class="rain"></di

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片; 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻

纯CSS实现聊天泡泡

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript. 聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见,但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript.而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建,并用CSS3来增强效果.不使用图片,也不使用JavaScript和更加不使用当前语义没用到的HTML哦. 在CSS文件中有大量对代码的注释,可以让你方便的看懂这些代码.(译者:在翻译时作

纯CSS实现Tab的两种方案

Tab在当前的Web应用中是非常常见的,最大的好处在于可以充分的利用有限的空间来展示更多的内容.常见的的Tab一般都是通过Javascript来实现,它的好处是灵活和功能强大.但是在某些情况下,如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的.本文主要介绍两种纯CSS的实现方案: 1. 锚点 + :target; 2. 纯锚点; 这两种各有各优点,也有各自的局限性. 具体的Demo请查看这里 方案一: 锚点 + :target CSS3中引入了一个新的伪类:target,当用户和页

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯CSS绘制三角形箭头效果

  最近我想修改一下这个网站,我想在上面放置一个提示框.这是很容易,但我想让提示框上有一个三角形的箭头.可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难.幸运的是,MooTools的核心开发着Darren Waddell告诉了我一个非常棒 使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码 复制代码 代码如下: /* create an arrow that points up */ div.arrow-up { widt

用纯CSS作按钮[Good]

本文示例用纯CSS作按钮,不用JavaScript代码.这并不是暗示JavaScript不好或陈旧,而是要说明CSS具有的能力.============================================================我们需要具有领先思路的代码,这是一个例子.本文代码要在第六代浏览器,即IE6+,    NN/Mozilla 6+或IE5.5上使用.本文示例用纯CSS作按钮,不用JavaScript代码.这并不是暗示JavaScript不好或陈旧,而是要说明CSS具

纯 CSS 实现三角形尖角箭头的实例

上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti