今天,我们要向您展示如何创建一个简单的基于文本的项的模糊效果。CSS的主要容器将固定宽度和中心:.ib-container{ position: relative; width: 800px; margin: 30px auto;}让我们明确浮动,伪元素:.ib-container:before,.ib-container:after { content:""; display:table;}.ib-container:after { clear:both;}现在,让我们风格的文章。我们将让他们漂浮和添加两个盒阴影,白色的人会有很大的传播距离。??时,我们将添加三个属性的转变:透明度,转换css:.ib-container article{ width: 140px; height: 220px; background: #fff; cursor: pointer; float: left; border: 10px solid #fff; text-align: left; text-transform: none; margin: 15px; z-index: 1; box-shadow: 0px 0px 0px 10px rgba(255,255,255,1), 1px 1px 3px 10px rgba(0,0,0,0.2); transition: opacity 0.4s linear, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;}为了避免闪烁。(如果你喜欢的话你可以删除这个脆看文本,虽然)。让我们并创建一些不错的排版样式的文本元素。每个元素的颜色和将会匹配:.ib-container h3 a{ font-size: 16px; font-weight: 400; color: rgba(0, 0, 0, 1); text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); opacity: 0.8;}.ib-container article header span{ font-size: 10px; font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; padding: 10px 0; display: block; color: rgba(255, 210, 82, 1); text-shadow: 0px 0px 0px rgba(255, 210, 82, 1); text-transform: uppercase; opacity: 0.8;}.ib-container article p{ font-family: Verdana, sans-serif; font-size: 10px; line-height: 13px; color: rgba(51, 51, 51, 1); text-shadow: 0px 0px 0px rgba(51, 51, 51, 1); opacity: 0.8;}现在我们添加过渡到所有三个。再次,我们将有三个属性:透明度,将和颜色:.ib-container h3 a,.ib-container article header span,.ib-container article p{ transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;}模糊类将被应用到所有的兄弟姐妹目前徘徊。我们想按比例缩小并添加一个白色的大盒阴影,让这个盒子看起来很模糊。我们还将减少不透明度有点:.ib-container article.blur{ box-shadow: 0px 0px 20px 10px rgba(255,255,255,1); transform: scale(0.9); opacity: 0.7;}为了使文本元素看起来模糊,我们将颜色透明的rgba通过设置不透明度值为0,,我们会扩大将模糊距离:.ib-container article.blur h3 a{ text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0); opacity: 0.5;}.ib-container article.blur header span{ text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9); color: rgba(255, 210, 82, 0); opacity: 0.5;}.ib-container article.blur p{ text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9); color: rgba(51, 51, 51, 0); opacity: 0.5;}当前项目将徘徊略扩大和调整盒阴影。我们还将设置一个高z。索引来保证项目总是会在其他的上空盘旋的时候:.ib-container article.active{ transform: scale(1.05); box-shadow: 0px 0px 0px 10px rgba(255,255,255,1), 1px 11px 15px 10px rgba(0,0,0,0.4); z-index: 100; opacity: 1;}最后,但并非最不重要的,我们将文本元素的不透明度设置为1:.ib-container article.active h3 a,.ib-container article.active header span,.ib-container article.active p{ opacity; 1;}JAVASCRIPTvar $container = $('#ib-container'), $articles = $container.children('article'), timeout; $articles.on( 'mouseenter', function( event ) { var $article = $(this); clearTimeout( timeout ); timeout = setTimeout( function() { if( $article.hasClass('active') ) return false; $articles.not($article).removeClass('active').addClass('blur'); $article.removeClass('blur').addClass('active'); }, 75 ); }); $container.on( 'mouseleave', function( event ) { clearTimeout( timeout ); $articles.removeClass('active blur'); });
![CSS3和jQuery项目和模糊效果]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······