使用CSS3实现的图片过滤功能

Filter Functionality with CSS3 使用:checked伪类和sibling选择器，我们可以改变相邻元素的状态。从而实现图片过滤功能。点击Web Design标签查看效果（选中图片呈现高亮，而不符合条件的图片呈现模糊状态）。

模板，教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<body>
    <div class="container">
        <header>
            <h1>Filter Functionality <span>with CSS3</span></h1>
            <h2>Item Filter with CSS3 Transitions &amp; Animations</h2>
        </header>
        <section class="ff-container">

<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
            <label for="select-type-1" class="ff-label-type-1">Web Design</label>

<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
            <label for="select-type-2" class="ff-label-type-2">Illustration</label>

<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
            <label for="select-type-3" class="ff-label-type-3">Icon Design</label>

<ul class="ff-items">
                <li class="ff-item-type-2">
                    <a href="https://dribbble.com/shots/366400-Chameleon">
                        <span>Chameleon</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/1.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-1">
                    <a href="https://dribbble.com/shots/272575-Tutorials-wip-">
                        <span>Tutorials (wip)</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/2.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-1">
                    <a href="https://dribbble.com/shots/138484-Symplas-website">
                        <span>Symplas website</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/4.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-1">
                    <a href="https://dribbble.com/shots/188524-Event-Planning">
                        <span>Event Planning</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/9.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-2">
                    <a href="https://dribbble.com/shots/347197-Cake">
                        <span>Cake</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/6.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-2">
                    <a href="https://dribbble.com/shots/372566-Flower">
                        <span>Flower</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/3.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-3">
                    <a href="https://dribbble.com/shots/134868-TRON-Mobile-ver-">
                        <span>TRON: Mobile version</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/5.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-1">
                    <a href="https://dribbble.com/shots/186199-Tailoring-accessories">
                        <span>Tailoring accessories</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/7.jpg" />
                    </a>
                </li>
                <li class="ff-item-type-3">
                    <a href="https://dribbble.com/shots/133859-App-icon">
                        <span>App icon</span>
                        <img src="https://tympanus.net/Tutorials/CSS3FilterFunctionality/images/8.jpg" />
                    </a>
                </li>
            </ul>
        </section>
    </div>
</body>

</html>

Filter Functionality with CSS3 使用:checked伪类和sibling选择器，我们可以改变相邻元素的状态。从而实现图片过滤功能。点击Web Design标签查看效果（选中图片呈现高亮，而不符合条件的图片呈现模糊状态）。

模板，教程

编辑器支持Emmet

快捷键

Filter Functionality with CSS3 使用:checked伪类和sibling选择器，我们可以改变相邻元素的状态。 从而实现图片过滤功能。 点击Web Design标签查看效果（选中图片呈现高亮，而不符合条件的图片呈现模糊状态）。

模板，教程

使用jQuery和CSS3实现的全屏切分滑块/图片轮播

使用CSS3实现切片风格的图片滑动面板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Filter Functionality with CSS3 使用:checked伪类和sibling选择器，我们可以改变相邻元素的状态。从而实现图片过滤功能。点击Web Design标签查看效果（选中图片呈现高亮，而不符合条件的图片呈现模糊状态）。