使用CSS3和jQuery实现文本块的模糊效果

悬停项被放大凸显，其余项呈现模糊效果并缩小。

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1715
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div class="container">
        <header>
            <h1>Item Blur Effect <span>with CSS3 &amp; jQuery</span></h1>
            <h2>Using Box Shadows, Transform and Transitions</h2>
        </header>
        <section class="ib-container" id="ib-container">
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">25 Examples of Perfect Color Combinations in Web Design</a></h3>
                    <span>December 8, 2011 by Gisele Muller</span>
                </header>
                <p>Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy...</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/12/08/design-it-to-build-it-what-to-consider-when-designing-for-the-web/">Design It to Build It: What to Consider When Designing for the Web</a></h3>
                    <span>December 8, 2011 by Patrick Cox</span>
                </header>
                <p>For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas...</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/">Splash and Coming Soon Page Effects with CSS3</a></h3>
                    <span>December 7, 2011 by Mary Lou </span>
                </header>
                <p>CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations.</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/">Lateral On-Scroll Sliding with jQuery</a></h3>
                    <span>December 5, 2011 by Mary Lou </span>
                </header>
                <p>After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. </p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/12/01/6-questions-you-should-ask-yourself-when-choosing-fonts/">6 Questions You Should Ask Yourself When Choosing Fonts</a></h3>
                    <span>December 1, 2011 by Patrick Cox </span>
                </header>
                <p>Typography is truly a science and many designers spend an entire career devoted to the study. But selecting effective fonts for your project doesn't require...</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/11/30/inspiring-examples-of-symbol-and-metaphor-use-in-web-design/">Inspiring Examples of Symbol and Metaphor Use in Web Design</a></h3>
                    <span>November 30, 2011 by Mary Lou</span>
                </header>
                <p>There are many creative ways of showing what a website is about: the use of images, videos, descriptions and more. Symbolic graphics and metaphorical pictures...</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/11/28/typography-effects-with-css3-and-jquery/">Typography Effects with CSS3 and jQuery</a></h3>
                    <span>November 28, 2011 by Mary Lou</span>
                </header>
                <p>Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll...</p>
            </article>
            <article>
                <header>
                    <h3><a target="_blank" href="https://tympanus.net/codrops/2011/11/24/top-10-reasons-to-use-html5-right-now/">Top 10 Reasons to Use HTML5 Right Now</a></h3>
                    <span>November 24, 2011 by Patrick Cox </span>
                </header>
                <p>So you're still not using HTML5, huh? I guess you probably have your reasons; it's not fully adopted yet, it doesn't work in IE, you don't like users, you're out of touch or you are just...</p>
            </article>
        </section>
    </div>
    <script type="text/javascript" src="/uploads/160101/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function() {

var $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('blur').addClass('active'))
                        .removeClass('active')
                        .addClass('blur');

}, 65);

});

$container.on('mouseleave', function(event) {

clearTimeout(timeout);
                $articles.removeClass('active blur');

});

});
    </script>
</body>

</html>

悬停项被放大凸显，其余项呈现模糊效果并缩小。

教程

编辑器支持Emmet

快捷键

悬停项被放大凸显，其余项呈现模糊效果并缩小。

教程

使用CSS3和jQuery创建的文字排版特效 - 模糊淡入和纹理

使用jQuery-ui和CSS3实现的浮动（float）元素效果3D演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：