CSS模拟的网页开关灯效果

2024-09-05 12:17:21

字体：大中小

来源：转载

供稿：网友

纯css模拟网页上的开关灯效果，另外兼容IE6等浏览器，一款不错的类似于网页关灯效果的示例代码，我们或许经常会在网页播放器的周围发现这种特效，鼠标放上的时候，就像开灯了一样，图片高亮，鼠标移走了，则就暗下来了。

<!DOCTYPE html><html><head><title>CSS模拟的开关灯效果</title><meta  charset="utf-8" /><style>*{margin:0;padding:0;font-size:12px;list-style:none;border:0;-webkit-transition:opacity .2s ease-out;}body{margin:30px;}ul{background:url(/jscss/demoimg/201207/T1HH1oXexDXXXXXXXX-190-300.png) no-repeat left top;width:190px;height:300px; float:left;}ul li{float:left;position:relative;width:95px;height:30px;}ul li a{position:absolute;text-indent:-9999px;display:block;width:95px;height:30px;top:0;left:0;overflow:hidden;outline:none;}.floorMain{float:left;background-color:#000;width:390px;}.floorMain:hover a{opacity:0.7;filter:alpha(opacity='70');}.floorMain a{float:left;line-height:0;}.floorMain a:hover{opacity:1;filter:none;}</style></head><body><div style="width:970px;">	<ul>		<li>dior</li>		<li>雅漾</li>		<li>露得清</li>		<li>施华蔻</li>	</ul>	<div class="floorMain">		<img src="/d/file/p/2024/09-05/2032dc7b30bd104b8134afcadaac1a19.jpg" />		<img src="/d/file/p/2024/09-05/ac80e607cce892a9d67877a413bf75a0.jpg" />		<img src="/d/file/p/2024/09-05/2a8f40a9847dcb92cbdf421457c8c808.jpg" />	</div></div></body></html>

上一篇：CSS3文字立体效果

下一篇：CSS3 圆形时钟式网页进度条