首頁 > 開發者 > CSS

純CSS做的帶開關的檯燈

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More