CSS模拟的网页开关灯效果

2020-01-27 14:16:53

字体：大中小

来源：转载

供稿：网友

纯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><a href="#">dior</a></li>		<li><a href="#">雅漾</a></li>		<li><a href="#">露得清</a></li>		<li><a href="#">施华蔻</a></li>	</ul>	<div class="floorMain">		<a href="#"><img src="/d/file/p/2020/01-27/3c8cd19c1b39d7b0452372a22ddd8108.jpg" /></a>		<a href="#"><img src="/d/file/p/2020/01-27/7f59b4254cb40ef0dd129ebaac1aeb35.jpg" /></a>		<a href="#"><img src="/d/file/p/2020/01-27/de4476d54aad319c8abe6037a94dbc5e.jpg" /></a>	</div></div></body></html>

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

下一篇：CSS3文字立体效果

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注