滤镜Filters的十种特殊效果

最新推荐文章于 2023-12-18 14:49:13 发布
最新推荐文章于 2023-12-18 14:49:13 发布
阅读量622 收藏
点赞数

在日常的css图片样式处理上经常会遇到一些图片细微的模糊、透明、光亮、阴影等效果，下列我们将依此对其进行罗列使用方法。

实现如下图所示的效果：


                                             滤镜Filters的十种特殊效果

一、grayscale灰度

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .grayscale{  
  2.     -webkit-filter:grayscale(1);  
  3. }  
.grayscale{
    -webkit-filter:grayscale(1);
}


二、sepia褐色、复古

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .sepia{  
  2.     -webkit-filter:sepia(1);  
  3. }  
.sepia{
    -webkit-filter:sepia(1);
}


三、saturate饱和度

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .saturate{  
  2.     -webkit-filter:saturate(0.5);  
  3. }  
.saturate{
    -webkit-filter:saturate(0.5);
}



四、hue-rotate色相旋转

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .hue-rotate{  
  2.     -webkit-filter:hue-rotate(90deg);  
  3. }  
.hue-rotate{
    -webkit-filter:hue-rotate(90deg);
}



五、invert反色

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .invert{  
  2.     -webkit-filter:invert(1);  
  3. }  
.invert{
    -webkit-filter:invert(1);
}



六、opacity透明度

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .opacity{  
  2.     -webkit-filter:opacity(.2);  
  3. }  
.opacity{
    -webkit-filter:opacity(.2);
}



七、brightness亮度

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .brightness{  
  2.     -webkit-filter:brightness(.5);  
  3. }  
.brightness{
    -webkit-filter:brightness(.5);
}



八、contrast对比度

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .contrast{  
  2.     -webkit-filter:contrast(2);  
  3. }  
.contrast{
    -webkit-filter:contrast(2);
}



九、blur模糊

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .blur{  
  2.     -webkit-filter:blur(3px);  
  3. }  
.blur{
    -webkit-filter:blur(3px);
}



十、drop-shadow阴影

[css] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. .drop-shadow{  
  2.     -webkit-filter:drop-shadow(5px 5px 5px #ccc);  
  3. }  
.drop-shadow{
    -webkit-filter:drop-shadow(5px 5px 5px #ccc);
}



源码：

[html] view plain copy
print ? 在CODE上查看代码片 派生到我的代码片
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title>滤镜Filters</title>  
  6.     <style>  
  7.         .index h1 {  
  8.             text-align: center;  
  9.         }  
  10.         .index img {  
  11.             width: 384px;  
  12.             height: 100px;  
  13.         }  
  14.         .box-l {  
  15.             float: left;  
  16.             width: 50%;  
  17.             height: auto;  
  18.         }  
  19.         .box-r {  
  20.             position: fixed;  
  21.             top: 75px;  
  22.             right: 0;  
  23.             width: 40%;  
  24.             height: auto;  
  25.         }  
  26.         .box-r li {  
  27.             float: left;  
  28.             width: 100%;  
  29.             font-size: 24px;  
  30.         }  
  31.         .box-r li a {  
  32.             color: #000;  
  33.         }  
  34.         .box-r li:hover {  
  35.             font-weight: bold;  
  36.         }  
  37.         .grayscale{  
  38.             -webkit-filter:grayscale(1);  
  39.         }  
  40.         .sepia{  
  41.             -webkit-filter:sepia(1);  
  42.         }  
  43.         .saturate{  
  44.             -webkit-filter:saturate(0.5);  
  45.         }  
  46.         .hue-rotate{  
  47.             -webkit-filter:hue-rotate(90deg);  
  48.         }  
  49.         .invert{  
  50.             -webkit-filter:invert(1);  
  51.         }  
  52.         .opacity{  
  53.             -webkit-filter:opacity(.2);  
  54.         }  
  55.         .brightness{  
  56.             -webkit-filter:brightness(.5);  
  57.         }  
  58.         .contrast{  
  59.             -webkit-filter:contrast(2);  
  60.         }  
  61.         .blur{  
  62.             -webkit-filter:blur(3px);  
  63.         }  
  64.         .drop-shadow{  
  65.             -webkit-filter:drop-shadow(5px 5px 5px #ccc);  
  66.         }  
  67.     </style>  
  68. </head>  
  69. <body>  
  70.     <div class=“index”>  
  71.         <h1>滤镜Filters的十种特殊效果</h1>  
  72.         <hr>  
  73.         <div class=“box-l”>  
  74.             <h2 id=“normal”>正常效果</h2>  
  75.             <img class=“normal” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  76.             <hr>  
  77.             <h2 id=“grayscale”>一、grayscale灰度–grayscale(0-1)</h2>  
  78.             <img class=“grayscale” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  79.             <hr>  
  80.             <h2 id=“sepia”>二、sepia褐色、复古–sepia(0-1)</h2>  
  81.             <img class=“sepia” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  82.             <hr>  
  83.             <h2 id=“saturate”>三、saturate饱和度–saturate(0-1)</h2>  
  84.             <img class=“saturate” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  85.             <hr>  
  86.             <h2 id=“hue-rotate”>四、hue-rotate色相旋转–hue-rotate(0deg-360deg)</h2>  
  87.             <img class=“hue-rotate” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  88.             <hr>  
  89.             <h2 id=“invert”>五、invert反色–invert(0-1)</h2>  
  90.             <img class=“invert” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  91.             <hr>  
  92.             <h2 id=“opacity”>六、opacity透明度–opacity(0-1)</h2>  
  93.             <img class=“opacity” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  94.             <hr>  
  95.             <h2 id=“brightness”>七、brightness亮度–brightness(0-x)</h2>  
  96.             <img class=“brightness” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  97.             <hr>  
  98.             <h2 id=“contrast”>八、contrast对比度–contrast(0-x)</h2>  
  99.             <img class=“contrast” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  100.             <hr>  
  101.             <h2 id=“blur”>九、blur模糊–blur(0xp-Xpx)</h2>  
  102.             <img class=“blur” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  103.             <hr>  
  104.             <h2 id=“drop-shadow”>十、drop-shadow阴影–drop-shadow(x y 模糊度 颜色)</h2>  
  105.             <img class=“drop-shadow” alt=“HTML5 Logo” src=“https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center”/>  
  106.         </div>  
  107.         <div class=“box-r”>  
  108.             <ul>  
  109.                 <li><a href=“#grayscale”>grayscale灰度</a></li>  
  110.                 <li><a href=“#sepia”>sepia褐色</a></li>  
  111.                 <li><a href=“#saturate”>saturate饱和度</a></li>  
  112.                 <li><a href=“#hue-rotate”>hue-rotate色相旋转</a></li>  
  113.                 <li><a href=“#invert”>invert反色</a></li>  
  114.                 <li><a href=“#opacity”>opacity透明度</a></li>  
  115.                 <li><a href=“#brightness”>brightness亮度</a></li>  
  116.                 <li><a href=“#contrast”>contrast对比度</a></li>  
  117.                 <li><a href=“#blur”>blur模糊</a></li>  
  118.                 <li><a href=“#drop-shadow”>drop-shadow阴影</a></li>  
  119.             </ul>  
  120.         </div>  
  121.     </div>  
  122. </body>  
  123. </html>  
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滤镜Filters</title>
    <style>
        .index h1 {
            text-align: center;
        }
        .index img {
            width: 384px;
            height: 100px;
        }
        .box-l {
            float: left;
            width: 50%;
            height: auto;
        }
        .box-r {
            position: fixed;
            top: 75px;
            right: 0;
            width: 40%;
            height: auto;
        }
        .box-r li {
            float: left;
            width: 100%;
            font-size: 24px;
        }
        .box-r li a {
            color: #000;
        }
        .box-r li:hover {
            font-weight: bold;
        }
        .grayscale{
            -webkit-filter:grayscale(1);
        }
        .sepia{
            -webkit-filter:sepia(1);
        }
        .saturate{
            -webkit-filter:saturate(0.5);
        }
        .hue-rotate{
            -webkit-filter:hue-rotate(90deg);
        }
        .invert{
            -webkit-filter:invert(1);
        }
        .opacity{
            -webkit-filter:opacity(.2);
        }
        .brightness{
            -webkit-filter:brightness(.5);
        }
        .contrast{
            -webkit-filter:contrast(2);
        }
        .blur{
            -webkit-filter:blur(3px);
        }
        .drop-shadow{
            -webkit-filter:drop-shadow(5px 5px 5px #ccc);
        }
    </style>
</head>
<body>
    <div class="index">
        <h1>滤镜Filters的十种特殊效果</h1>
        <hr>
        <div class="box-l">
            <h2 id="normal">正常效果</h2>
            <img class="normal" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="grayscale">一、grayscale灰度--grayscale(0-1)</h2>
            <img class="grayscale" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="sepia">二、sepia褐色、复古--sepia(0-1)</h2>
            <img class="sepia" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="saturate">三、saturate饱和度--saturate(0-1)</h2>
            <img class="saturate" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="hue-rotate">四、hue-rotate色相旋转--hue-rotate(0deg-360deg)</h2>
            <img class="hue-rotate" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="invert">五、invert反色--invert(0-1)</h2>
            <img class="invert" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="opacity">六、opacity透明度--opacity(0-1)</h2>
            <img class="opacity" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="brightness">七、brightness亮度--brightness(0-x)</h2>
            <img class="brightness" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="contrast">八、contrast对比度--contrast(0-x)</h2>
            <img class="contrast" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="blur">九、blur模糊--blur(0xp-Xpx)</h2>
            <img class="blur" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
            <hr>
            <h2 id="drop-shadow">十、drop-shadow阴影--drop-shadow(x y 模糊度 颜色)</h2>
            <img class="drop-shadow" alt="HTML5 Logo" src="https://img-blog.csdn.net/20170323145523759?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"/>
        </div>
        <div class="box-r">
            <ul>
                <li><a href="#grayscale">grayscale灰度</a></li>
                <li><a href="#sepia">sepia褐色</a></li>
                <li><a href="#saturate">saturate饱和度</a></li>
                <li><a href="#hue-rotate">hue-rotate色相旋转</a></li>
                <li><a href="#invert">invert反色</a></li>
                <li><a href="#opacity">opacity透明度</a></li>
                <li><a href="#brightness">brightness亮度</a></li>
                <li><a href="#contrast">contrast对比度</a></li>
                <li><a href="#blur">blur模糊</a></li>
                <li><a href="#drop-shadow">drop-shadow阴影</a></li>
            </ul>
        </div>
    </div>
</body>
</html>






















零零历险记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
libmpv使用滤镜处理视频进行播放
08-08 720
本文将介绍libmpv的滤镜功能，包括滤镜的基本原理、常用滤镜效果的示例以及如何在自定义滤镜链中组合和配置滤镜。探索滤镜在视频处理中的应用，帮助开发者了解如何充分利用libmpv的滤镜能力。
FFmpeg滤镜API用法详解(二)
程序猿老樊的博客
11-30 621
一个滤镜图可能由多个滤镜链构成，每个滤镜链的输入节点就是 buffer 滤镜，输出节点是 buffersink 滤镜，因此一个滤镜图可能有多个 buffer 滤镜，也可能有多个 buffersink 滤镜。滤镜(AVFilter)需要通过滤镜实例(AVFilterContext)引用，为 buffer 滤镜创建的滤镜实例是 fctx->bufsrc_ctx，用户通过往 fctx->bufsrc_ctx 填入视频帧来为滤镜链提供输入。buffer 滤镜是滤镜链中的第一个滤镜，因此只有输出引脚而无输入引脚。
网页特殊滤镜代码大集合
09-10
网站滤镜代码详细介绍,有语法分析及示例 　1、滤镜：Alpha 　　语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)" 　　说明： 　　Opacity：起始值，取值为0～100, 0为透明，100为原图。 　　FinishOpacity：目标值。 　　Style：1或2或3 　　StartX：任意值 　　StartY：任意值 　　例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") ............ ........... ...........
CSS3的filter滤镜特效
巧克力很苦的小博客
04-28 387
Filter主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有： grayscale 灰度 值为0-1之间的小数 sepia 褐色　　　　...
css的filter全属性介绍
最新发布
ZXH0122的博客
12-18 675
图片--模糊，饱和度，色调旋转，对比度，亮度......
css3——滤镜filter、高斯模糊blur，去除模糊的白边
努力、拼搏、奋进
11-11 1190
css3——滤镜filter、高斯模糊blur，去除模糊的白边
filter滤镜
weixin_57783177的博客
06-28 640
filter滤镜 开发工具与关键技术：DW CSS 作者：尘则 撰写时间：2021/4/28 filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 1、grayscale灰度（值为0-1之间的小数） filter:grayscale(1); -webkit-filter:grayscale(1); 0表示灰度为0%，显示原图，1表示灰度为100%灰色。 2、sepia褐色（值为0-1之间的小数） filter:sepia(1); -webkit-fi...
用滤镜实现背景图片的拉伸效果代码
09-25
当传统的CSS背景属性无法满足特定的设计需求时，滤镜（Filters）提供了一种简单有效的替代方案。使用滤镜实现背景图片的拉伸效果是一种较为老旧但有效的方法，尤其适用于早期的IE浏览器。然而，鉴于现代浏览器的发展...
Android直播开发之旅(18)：FFmpeg中滤镜(filter)的工作原理
老蒋也疯狂
11-21 3353
文章目录1. 什么是滤镜1.1 简单滤镜(滤镜链)1.2 复杂滤镜(滤镜图)2. 滤镜API介绍与使用2.1 滤镜API介绍2.1.1 结构体2.1.2 功能函数2.2 滤镜API的使用2.2.1 配置滤镜图2.2.2 使用滤镜图 1. 什么是滤镜  滤镜(filter)是指将未经过处理的原始音频帧(如PCM)或视频帧(如YUV、RGB)经过滤镜器处理后，得到具体“特殊效果”的音频帧或视频帧，比...
CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)
12-28
通过filter: blur()实现CSS毛玻璃效果，类似PS高斯模糊，图片和背景都可以使用；但在移动端，会造成卡顿，不建议在移动端使用；
ps神经网络滤镜用不了,神经网络ai滤镜
shirley67269的博客
10-10 1373
自定滤镜 “自定”滤镜允许您设计自己的滤镜效果。使用“自定”滤镜，根据预定义的数学运算（称为卷积），可以更改图像中每个像素的亮度值。根据周围的像素值为每个像素重新指定一个值。您可以存储创建的自定滤镜，并将它们用于其他 Photoshop 图像。使用“存储”和“载入”按钮存储和重新使用自定滤镜。应用自定滤镜 在“编辑”工作区中，选择图像、图层或区域。从“滤镜”菜单中，选择“其它”>“自定”。选择正中间的文本框，它代表要进行计算的像素。输入要与该像素的亮度值相乘的值，值范围是 -999 到 +999。
html背景图片半透明写法,CSS实现背景图片透明而文字不透明效果的两种方法
weixin_36436373的博客
06-03 5054
摘要:方法一(毛玻璃效果)：背景图 + 伪类 + flite:blur(3px)方法二(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3)CSS实现背景图片透明，文字不透明效果的两种方法项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。1.毛玻璃效果：背景图 + 伪类 + flite...
用css写背景模糊的三种情况
weixin_73529240的博客
11-02 9470
今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。
pixi.js制作实现擦玻璃的效果
weixin_41639678的博客
10-12 460
Pixi.js制作实现擦玻璃的效果
html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS
weixin_42512841的博客
06-03 533
CSS3 filter(滤镜) 制作图片高斯模糊无需JS这是一个寂寞的工作日，因为没有女盆友所以很寂寞，因为很寂寞所以来写教程。希望再看教程的你也是单身！啊,知道你是单身枫瑞贼开心！爽的一B！！！起初我在不停的切图,UI小姐姐问了我一个问题关于图片高斯模糊的问题。PS制作高斯模糊就1分钟搞定，那对于程序员来说难吗？无法就是JS处理或者CSS3的filter滤镜处理首先素材图片，看这是枫瑞女盆友，你...
filter:blur() 实现毛玻璃效果
热门推荐
longshelan_113的专栏
01-03 1万+
使用玻璃效果比普通效果中的文字更易阅读，而且整体美观。在过去，我们通常把文本框区域的背景做模糊处理，随后使用一整张背景。不仅消耗性能，而且在HTML方面难以修改维护。以下是HTML片段 "The only way to get rid of a temptation is to yield to it. R
filter: blur() 高斯模糊效果
kangkang_style的博客
03-21 4003
比较喜欢的效果实例： <div class="lbg"> <img src="../../assets/01.jpg" class="test-img"> </div> .lbg{ /* 设置相对定位 */ position: relative; /* 宽度120%，-10%让元素集中 */ lef...
IE滤镜与CSS3效果详解：从透明到波纹效果
"本文主要介绍了在应对不支持CSS3的IE浏览器时，如何利用IE特有的滤镜技术实现一些视觉效果，并探讨了W3C正在尝试将滤镜标准化的趋势。作者整理了IE滤镜的各种效果，包括Alpha、blur、Chroma等，并提供了相应的使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值