CSS中模糊滤镜

来源：互联网发布：linux 执行jar包命令编辑：程序博客网时间：2024/06/04 19:37
今天在做图片轮播的时候，添加CSS中模糊滤镜，感觉效果还行。如下图
代码如下图
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">.blur {    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    -webkit-filter: blur(40px); /* Chrome, Opera */       -moz-filter: blur(40px);        -ms-filter: blur(40px);               filter: blur(40px);    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=40, MakeShadow=false); /* IE6~IE9 */}.play_imgs{width: 100%; height: auto; margin: 0 auto; text-align: center; background-color: #aaa;position: relative;}ul{list-style: none;}#play_imgs_bg{width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat;position: absolute; background-image: url('./images/index/banner1.jpg')}.play_imgs_width{width:610px; margin: 0 auto;}.imgs_source{ margin: 0 auto; position: relative; height: 400px; overflow: hidden;}.imgs_source li{position: absolute; width: 100%; left: 0px;}.cur_active{z-index: 10;}.imgs_buttons{ margin: 0 auto; width: 400px; text-align: center; position: relative; height: 35px;  top:-50px; margin: 0 auto; z-index: 20;}.imgs_buttons li {float: left; width: 120px;}.imgs_buttons li a{display: block; width: 100px; margin: 0 10px;height: 20px; line-height: 20px; text-decoration: none;}.buttons_default{background:rgba(255,255,255,0.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/background-color: #FFF; filter:Alpha(opacity=50);/*实现IE背景透明*/}.buttons_ahover,.imgs_buttons li a:hover{background:rgba(200,200,200,0.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/background-color: rgba(200,200,200); filter:Alpha(opacity=50);/*实现IE背景透明*/ color: #f00}</style><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><title>测试</title></head><body><div><div class="play_imgs"><div id="play_imgs_bg" class="blur"></div><ul class="play_imgs_width  imgs_source"><li style="z-index:10"><a href="javascript:;"><img src="./images/index/banner1.jpg" width="610px" height="390px"/></a></li><li style="z-index:0"><a href="javascript:;"><img src="./images/index/banner2.png" width="610px" height="390px"/></a></li><li style="z-index:0"><a href="javascript:;"><img src="./images/index/banner3.jpg" width="610px" height="390px"/></a></li></ul><ul class="imgs_buttons play_imgs_width"><li><a href="javascript:;" class="buttons_ahover">1</a></li><li><a href="javascript:;" class="buttons_default">2</a></li><li><a href="javascript:;" class="buttons_default">3</a></li></ul> </div></div><script type="text/javascript">$(function(){$('.imgs_buttons a').click(function(){$('.imgs_buttons a').not(this).removeClass().addClass('buttons_default');$(this).removeClass().addClass('buttons_ahover');//图片移动movePlayImgs($(this).parent().index());});/***index代表下一次需要出现图片的序号**/function movePlayImgs(){//先把上一次显示的图片if(arguments.length>0){index=arguments[0];}else{var imgSum=-1;$('.imgs_source li').each(function(){if($(this).css('z-index')==10){index=$(this).index();}imgSum+=1;});if(index==imgSum){index=0;}else{index+=1;}}var lastObj=null;$('.imgs_source li').each(function(i){if(index ==i && $(this).css('z-index') !=10){$(this).css({'z-index':10,'left':'-610px'}).animate({'left':0},1000,function(){if(lastObj !=null){lastObj.css('z-index',0);}});//更换play_imgs的背景var imgSrc=$(this).find('img').attr('src');$('#play_imgs_bg').css({'background':'url('+imgSrc+')'});//修改按钮样式$('.imgs_buttons a').removeClass().addClass('buttons_default').eq(index).removeClass().addClass('buttons_ahover');}else if( index !=i && $(this).css('z-index')==10){$(this).css('z-index',5);lastObj=$(this);}});}});</script></body></html>
0 0