当前位置：首页 > 网页特效 > 图片特效 >

CSS3过滤器实现图片模糊与高亮显示

时间：2014-03-14 08:36 来源：互联网作者：源码搜藏收藏推荐

<!doctype html>
<head>
<title>使用CSS3过滤器制作图片模糊与高亮显示切换特效的jQuery插件</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
html {
    background: url(/jscss/demoimg/201403/roughcloth.png)
}
body {
    font-family:'Lato', sans-serif;
    color:#333;
    text-shadow:0 1px 0 rgba(255,255,255,1);
    line-height: 1.7;
    font-size:18px;
}
.frame {
    position:relative;
    width:400px;
    height:400px;
    float:left;
    margin:20px 40px 20px 0;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 15px 0px rgba(0, 0, 0, 0.3);
    border:5px solid white;
}
.tiltshift-layer {
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity:1;
    cursor:pointer;
}
.frame:hover .tiltshift-layer {
    opacity:0;
}
a {
    color:#ed3314;
    text-decoration: none;
}
.clear {
    clear:both;
}
#main {
	width:860px;
	margin:0 auto;
    overflow:visible;
    padding-bottom:40px;
    position:relative;
}
h1 {
    font-size:56px;
    margin:10px 0 0;
}
h2 {
    border-bottom:1px solid rgba(0,0,0,0.2);
    padding-bottom:5px;
    margin:40px 0;
}
.social {
    position:absolute;
    top:0;
    right:0;
}
#hover {
    width:90px;
    height:65px;
    position:absolute;
    top:60px;
    background:url(http://www.codefans.net/jscss/demoimg/201403/hover.png) no-repeat;
    left: -120px;
}
.desc {
    width:400px;
    float:left;
}
.desc p:first-child {
    margin-top:0;
}
.frame:nth-child(even) {
    margin-right:0;
}
.avatar {
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 15px 0 rgba(0, 0, 0, 0.3);
    border:5px solid white;
    margin:0 20px 40px 0;
    float:left;
    height:80px;
    width:80px;
    clear: left;
}
code {
    display:block;
    background:rgba(0,0,0,0.05);
    padding:10px;
    font-size:15px;
}
.tiltshift-wrap {
    display:inline-block;
    position:relative;
    overflow:hidden;
}
.tiltshift-layer {
    position:absolute;
    overflow:hidden;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-repeat:no-repeat;
    background-position:0 0;
}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js"></script>
<script>
(function($) {
    $.fn.tiltShift = function(options) {
        $(this).each(function(){
            var $this = $(this);
            var $parent = $this.parent();
            var s_position = $this.data('position');
            var s_blur = $this.data('blur');
            var s_focus = $this.data('focus');
            var s_falloff = $this.data('falloff');
            var s_direction = $this.data('direction');
            // Setup DOM around Image (ugly but flexible)
            var $wrap = $this.wrap('<div class="tiltshift-wrap" />').parent();
            $wrap.prepend('<div class="tiltshift-before tiltshift-layer" />');
            $wrap.append('<div class="tiltshift-after tiltshift-layer" />');
            // Grab original image and assign to before & after
            var src = $this.attr('src');
            $parent.find('.tiltshift-layer').css('background-image', 'url(http://www.codefans.net/jscss/demoimg/201403/' + src + ')');
            // Set Blur
            $parent.find('.tiltshift-layer').css({
                '-webkit-filter': 'blur(' + s_blur + 'px) contrast(105%) saturate(105%)'
            });
            // Calculate Focus Boundaries (impacted by inFocus value)
            var beforeEnd = ( s_position - ( s_focus / 2 ) ) / 100;
            var afterEnd = ( ( 100 - s_position ) - ( s_focus / 2 ) ) / 100;
            // Calculate Falloff Breakpoints (impacted by tightness value)
            var beforeFall = ( ( beforeEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);
            var afterFall = ( ( afterEnd - ( s_falloff / 100 ) ) * 100 ).toFixed(2);
            // Adjust back up to integers for gradient format
            beforeEnd *= 100;
            afterEnd *= 100;
            // Set directional variables
            var beforeDirection, afterDirection;
            if ( s_direction === 'y' ) {
                beforeDirection = '270deg';
                afterDirection = '90deg';
            } else if ( s_direction === 'x' ) {
                beforeDirection = '180deg';
                afterDirection = '0deg';
            } else {
                var angle = s_direction % 360;
                beforeDirection = (angle + 180) + 'deg';
                afterDirection = angle + 'deg';
            }
            // Apply Gradient Mask to Image Layers
            $parent.find('.tiltshift-before').css({
                '-webkit-mask-image' : '-webkit-linear-gradient(' + beforeDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + beforeFall + '%, rgba(0,0,0,0) ' + beforeEnd + '%)'
            });
            $parent.find('.tiltshift-after').css({
                '-webkit-mask-image' : '-webkit-linear-gradient(' + afterDirection + ', rgba(0,0,0,1) 0, rgba(0,0,0,1) ' + afterFall + '%, rgba(0,0,0,0) ' + afterEnd + '%)'
            });
        });
    };
})(jQuery);
jQuery(document).ready(function() {
     $('.tiltshift').tiltShift();
 });
</script>

</head>
<body>
<article id="main">
<header>
<div style=" color:#000; width:600px;margin:0 auto; text-align:center; font-size:12px;">
<p>适用浏览器：FireFox、Chrome、Safari</p>
</div>
      </header>
        
        <div class="frame">
            <img src="http://www.codefans.net/jscss/demoimg/201403/example2.jpg" class="tiltshift" data-position="55" data-blur="2" data-focus="15" data-falloff="10" data-direction="y" alt="See credits at bottom of page for Photograpger link">
        </div>
        
        <div class="frame">
            <img src="http://www.codefans.net/jscss/demoimg/201403/example1.jpg" class="tiltshift" data-position="70" data-blur="1" data-focus="10" data-falloff="20" data-direction="y" alt="See credits at bottom of page for Photograpger link">
        </div>
        
        <div class="frame">
            <img src="http://www.codefans.net/jscss/demoimg/201403/example3.jpg" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y" alt="See credits at bottom of page for Photograpger link">
        </div>
        
        <div class="frame">
            <img src="http://www.codefans.net/jscss/demoimg/201403/example4.jpg" class="tiltshift" data-position="50" data-blur="2" data-focus="4" data-falloff="6" data-direction="x" alt="See credits at bottom of page for Photograpger link">
        </div>
</article>
    
</body>
</html>

网页特效

CSS3过滤器实现图片模糊与高亮显示

图片特效下载排行

最新文章