css实现灯塔发光效果实例

来源:csscss.org 更新时间:10/02/27 点击:

本实例是一个css实现的灯塔发光效果实例，当鼠标移到灯塔上的时候，灯塔就会立即发出一道光束，如果用flash实现起来是很简单的，可是这个确实完全通过css实现的哦并且没有任何图片：）

点击运行查看灯塔效果吧：

[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS在线-示例</title> <style type="text/css"> #lighthouse {display:block; position:relative; height:180px; background:#08c; width:42em;} #bita {display:block; position:absolute; left:50px; top:20px; width:10px; height:0; overflow:hidden; border-left:5px solid #08c; border-right:5px solid #08c; border-bottom:5px solid #fff;} #bitb {position:absolute; left:50px; top:25px; width:20px; height:10px; overflow:hidden; background:#fff; border-top:2px solid #000; border-bottom:2px solid #000;} .glasstop {display:block; width:0; height:0; border-top:5px solid #aaa; border-left:2px solid #fff; border-right:3px solid #fff; float:left; overflow:hidden;} .glassbot {display:block; width:0; height:0; border-bottom:5px solid #666; border-left:2px solid #eee; border-right:3px solid #eee; float:left; overflow:hidden;} #bitc {position:absolute; left:47px; top:39px; width:26px; height:6px; overflow:hidden; background:#fff; border-top:1px solid #aaa; border-bottom:2px solid #000;} #bitd {position:absolute; left:50px; top:48px; width:20px; height:6px; overflow:hidden; background:#eee; border-top:1px solid #aaa; border-bottom:2px solid #000;} #bite {position:absolute; left:47px; top:57px; width:26px; height:5px; overflow:hidden; background:#fff; border-top:1px solid #aaa; border-bottom:2px solid #000;} #bitf {display:block; position:absolute; left:40px; top:65px; width:20px; height:1px; background:#aaa; overflow:hidden; border-left:10px solid #08c; border-right:10px solid #08c; border-bottom:77px solid #fff;} #bitg {display:block;position:absolute; left:0; top:143px; width:150px; height:10px; overflow:hidden; background:#000;} #bith {display:block;position:absolute; left:0; top:153px; width:160px; height:10px; overflow:hidden; background:#000;} #biti {display:block;position:absolute; left:0; top:163px; width:42em; height:16px; overflow:hidden; background:#006; border-top:1px solid #006; color:#006;} #bitj {display:block;position:absolute; left:60px; top:80px; width:4px; height:8px; overflow:hidden; background:#000;} #bitk {display:block;position:absolute; left:50px; top:127px; width:10px; height:16px; overflow:hidden; background:#000;} #beamleft {display:block; position:absolute; left:0; top:20px; width:0; height:10px; border-top:6px solid #08c; border-left:46px solid #08c; border-bottom:6px solid #08c; overflow:hidden;} #beamright {display:block; position:absolute; left:74px; top:0; width:0; height:10px; border-top:25px solid #08c; border-right:436px solid #08c; border-bottom:25px solid #08c; overflow:hidden;} a#beam, a#beam:visited {text-decoration:none; color:#000; background:#08c; z-index:50; display:block; width:42em; margin:80px auto;} a#beam:hover {background:#fff; cursor:pointer;} a#beam:hover #beamleft, a#beam:hover #beamright {border-left-color:#fff;} a#beam:hover #beamright {border-right-color:#fff;} a#beam:hover #biti {border-top-color:#88f;} a#beam:hover .glasstop, a#beam:hover .glassbot {border-color:#fff;} </style> </head> <body> <div id="info"> <a id="beam" href="#nogo"> </a> </div> </body> </html>

<< css艺术:xhtml+css实现google,yahoo的logocss实现类似相框阴影div的Shadow效果 >>

css实现灯塔发光效果实例

DIV+CSS教程系列

DIV+CSS教程推荐阅读

DIV+CSS模板推荐

DIV+CSS设计工具