CSS3高级篇：滤镜
好了，这是本人的第一篇博文，希望给读者们带来技术上的提升
本文主要介绍CSS3里的filters（没有接触过这个属性的请自行百度）
基本用法
OK废话不多说，直接上效果图
CSS代码
img { filter: opacity(25%); filter: grayscale(50%); filter: invert(1); filter: brightness(0.4); filter: saturate(300%); filter: sepia(60%); filter: blur(2px); filter: hue-rotate(90deg); filter: contrast(2); filter: drop-shadow(5px 5px 5px #aaa); }
依次的滤镜效果分别是透明度、灰度、反色、亮度、饱和度、褐色、模糊（本人最喜欢的一种滤镜）、色相翻转、对比度、阴影
类似于PS里面的滤镜，当然没有PS里面的滤镜多
PS：可以使用hover观察效果
高级应用
1.利用 blur 生成图像阴影
一提到阴影，可能多数人（也包括我）想到的是box-shadow，filter：drop-shadow，text-shadow。额。。。总之离不开shadow
但这种方式生成的阴影都是单色，有没有能跟随图像颜色的阴影，答案是 “当然有”
先看原图
效果图
我累个去？还真有这种操作？
HTML代码
<div class="avator"></div>
CSS代码
.avator { position: relative; width: 200px; height: 200px; border-radius: 50%; background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505822443&di=941986df9c6514d5d43eaba4aa938347&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.qqtouxiang8.net%2Fuploads%2Fallimg%2Fc150313%2F142623130563050-922006.jpg") no-repeat center center; background-size: 100% 100%; } .avator::after { content: ""; position: absolute; top: 10%; left: 0%; width: 100%; height: 100%; background: inherit; background-size: 100% 100%; border-radius: 50%; -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-filter: blur(10px) brightness(80%) opacity(0.8);
filter: blur(10px) brightness(80%) opacity(0.8); z-index: -1; }
其原理就是利用伪元素，生成一个和原图一模一样的新图叠加在原图之下
然后利用模糊滤镜配合亮度和透明度，给新图制造出一个虚幻的影子，伪装成原图的阴影效果
最关键的一句代码：
filter: blur(10px) brightness(80%) opacity(0.8);嗯没错，就是这一句
2.利用 blur 混合 contrast 产生融合效果
接下来介绍的这个，是本文的重点，模糊滤镜叠加对比度滤镜产生的融合效果。让你知道什么是 CSS 黑科技！
单独将两个滤镜拿出来，它们的作用分别是：
- filter：blur()： 给图像设置高斯模糊效果。
- filter：contrast()： 调整图像的对比度。
但是，当他们“合体”的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。
先来看一个栗子：
HTML代码
<div class="filter-mix"></div>
CSS代码
<style> .filter-mix { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; filter: contrast(20); background: #fff; } .filter-mix::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: #333; top: 40px; left: 40px; z-index: 2; filter: blur(6px); box-sizing: border-box; animation: filterBallMove 4s ease-out infinite; } .filter-mix::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; background: #3F51B5; top: 60px; right: 40px; z-index: 2; filter: blur(6px); animation: filterBallMove2 4s ease-out infinite; } @keyframes filterBallMove { 50% { left: 140px; } } @keyframes filterBallMove2 { 50% { right: 140px; } } </style>
仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果。
上述效果的实现基于两点：
- 图形是在被设置了
filter: contrast()的画布背景上进行动画的- 进行动画的图形被设置了
filter: blur()（ 进行动画的图形的父元素需要是被设置了filter: contrast()的画布）意思是，上面两圆运动的背后，其实是叠加了一张设置了
filter: contrast()的大白色背景，而两个圆形则被设置了filter: blur()，两个条件缺一不可。
3.燃烧的火焰
先上图
不用怀疑你的眼睛，上述 GIF 效果就是使用纯 CSS 实现的。
核心还是 filter: contrast() 与 filter: blur() 配合使用
HTML代码
<body> <div class="g-container"> <div class="g-fire"> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> <div class="g-dot"></div> </div> </div> </body>
CSS代码
<style> .g-container { position: relative; width: 384px; height: 300px; margin: 0 auto; background-color: #000; } .g-fire { position: absolute; width: 0; height: 0; bottom: 100px; left: 50%; border-radius: 45%; box-sizing: border-box; border: 200px solid #000; border-bottom: 200px solid transparent; -webkit-transform: translate(-50%, 0) scaleX(0.4); transform: translate(-50%, 0) scaleX(0.4); background-color: var(--fireColor); -webkit-filter: blur(20px) contrast(30); filter: blur(20px) contrast(30); } .g-dot { position: absolute; bottom: -210px; left: 0; width: var(--dotSize); height: var(--dotSize); background: #000; border-radius: 50%; } .g-dot:nth-child(1) { bottom: -352px; left: -138px; -webkit-animation: move 2s infinite 0.2s linear; animation: move 2s infinite 0.2s linear; } .g-dot:nth-child(2) { bottom: -339px; left: -86px; -webkit-animation: move 1.9s infinite 5.8s linear; animation: move 1.9s infinite 5.8s linear; } .g-dot:nth-child(3) { bottom: -344px; left: -27px; -webkit-animation: move 1.4s infinite 2.5s linear; animation: move 1.4s infinite 2.5s linear; } .g-dot:nth-child(4) { bottom: -308px; left: -119px; -webkit-animation: move 3.2s infinite 2.8s linear; animation: move 3.2s infinite 2.8s linear; } .g-dot:nth-child(5) { bottom: -311px; left: 81px; -webkit-animation: move 0.9s infinite 0.2s linear; animation: move 0.9s infinite 0.2s linear; } .g-dot:nth-child(6) { bottom: -275px; left: 130px; -webkit-animation: move 2.7s infinite 1.8s linear; animation: move 2.7s infinite 1.8s linear; } .g-dot:nth-child(7) { bottom: -354px; left: -41px; -webkit-animation: move 2.7s infinite 5.1s linear; animation: move 2.7s infinite 5.1s linear; } .g-dot:nth-child(8) { bottom: -303px; left: -21px; -webkit-animation: move 0.9s infinite 5.1s linear; animation: move 0.9s infinite 5.1s linear; } .g-dot:nth-child(9) { bottom: -245px; left: 24px; -webkit-animation: move 2.4s infinite 1.5s linear; animation: move 2.4s infinite 1.5s linear; } .g-dot:nth-child(10) { bottom: -347px; left: -115px; -webkit-animation: move 1.2s infinite 5.5s linear; animation: move 1.2s infinite 5.5s linear; } .g-dot:nth-child(11) { bottom: -317px; left: -70px; -webkit-animation: move 1s infinite 3.4s linear; animation: move 1s infinite 3.4s linear; } .g-dot:nth-child(12) { bottom: -354px; left: 39px; -webkit-animation: move 1.6s infinite 3.1s linear; animation: move 1.6s infinite 3.1s linear; } .g-dot:nth-child(13) { bottom: -333px; left: 2px; -webkit-animation: move 2.5s infinite 1.6s linear; animation: move 2.5s infinite 1.6s linear; } .g-dot:nth-child(14) { bottom: -314px; left: -45px; -webkit-animation: move 1.5s infinite 5.7s linear; animation: move 1.5s infinite 5.7s linear; } .g-dot:nth-child(15) { bottom: -336px; left: 38px; -webkit-animation: move 3s infinite 1.3s linear; animation: move 3s infinite 1.3s linear; } .g-dot:nth-child(16) { bottom: -258px; left: -44px; -webkit-animation: move 1.1s infinite 2s linear; animation: move 1.1s infinite 2s linear; } .g-dot:nth-child(17) { bottom: -348px; left: -80px; -webkit-animation: move 0.9s infinite 3.8s linear; animation: move 0.9s infinite 3.8s linear; } .g-dot:nth-child(18) { bottom: -335px; left: 23px; -webkit-animation: move 2.4s infinite 4.8s linear; animation: move 2.4s infinite 4.8s linear; } .g-dot:nth-child(19) { bottom: -329px; left: -100px; -webkit-animation: move 0.9s infinite 1.3s linear; animation: move 0.9s infinite 1.3s linear; } .g-dot:nth-child(20) { bottom: -348px; left: 30px; -webkit-animation: move 3.3s infinite 1s linear; animation: move 3.3s infinite 1s linear; } .g-dot:nth-child(21) { bottom: -329px; left: -135px; -webkit-animation: move 2s infinite 2.9s linear; animation: move 2s infinite 2.9s linear; } .g-dot:nth-child(22) { bottom: -249px; left: 139px; -webkit-animation: move 3.1s infinite 0.8s linear; animation: move 3.1s infinite 0.8s linear; } .g-dot:nth-child(23) { bottom: -281px; left: -74px; -webkit-animation: move 1.1s infinite 5.6s linear; animation: move 1.1s infinite 5.6s linear; } .g-dot:nth-child(24) { bottom: -310px; left: -156px; -webkit-animation: move 2.9s infinite 1.7s linear; animation: move 2.9s infinite 1.7s linear; } .g-dot:nth-child(25) { bottom: -317px; left: -147px; -webkit-animation: move 2.5s infinite 1.4s linear; animation: move 2.5s infinite 1.4s linear; } .g-dot:nth-child(26) { bottom: -276px; left: -116px; -webkit-animation: move 2.4s infinite 4.7s linear; animation: move 2.4s infinite 4.7s linear; } .g-dot:nth-child(27) { bottom: -270px; left: 108px; -webkit-animation: move 0.8s infinite 0.4s linear; animation: move 0.8s infinite 0.4s linear; } .g-dot:nth-child(28) { bottom: -337px; left: -91px; -webkit-animation: move 2.4s infinite 4.3s linear; animation: move 2.4s infinite 4.3s linear; } .g-dot:nth-child(29) { bottom: -298px; left: 91px; -webkit-animation: move 0.8s infinite 0.3s linear; animation: move 0.8s infinite 0.3s linear; } .g-dot:nth-child(30) { bottom: -282px; left: 57px; -webkit-animation: move 1.7s infinite 5.4s linear; animation: move 1.7s infinite 5.4s linear; } .g-dot:nth-child(31) { bottom: -342px; left: -25px; -webkit-animation: move 1.4s infinite 4.9s linear; animation: move 1.4s infinite 4.9s linear; } .g-dot:nth-child(32) { bottom: -289px; left: -72px; -webkit-animation: move 1.8s infinite 4.7s linear; animation: move 1.8s infinite 4.7s linear; } .g-dot:nth-child(33) { bottom: -356px; left: 99px; -webkit-animation: move 1.6s infinite 0.5s linear; animation: move 1.6s infinite 0.5s linear; } .g-dot:nth-child(34) { bottom: -301px; left: -117px; -webkit-animation: move 1.9s infinite 1.7s linear; animation: move 1.9s infinite 1.7s linear; } .g-dot:nth-child(35) { bottom: -288px; left: 27px; -webkit-animation: move 2.9s infinite 2.3s linear; animation: move 2.9s infinite 2.3s linear; } .g-dot:nth-child(36) { bottom: -359px; left: -26px; -webkit-animation: move 2.5s infinite 2s linear; animation: move 2.5s infinite 2s linear; } .g-dot:nth-child(37) { bottom: -247px; left: 88px; -webkit-animation: move 3.1s infinite 0.1s linear; animation: move 3.1s infinite 0.1s linear; } .g-dot:nth-child(38) { bottom: -343px; left: -14px; -webkit-animation: move 0.9s infinite 5.8s linear; animation: move 0.9s infinite 5.8s linear; } .g-dot:nth-child(39) { bottom: -289px; left: 97px; -webkit-animation: move 1.5s infinite 5.2s linear; animation: move 1.5s infinite 5.2s linear; } .g-dot:nth-child(40) { bottom: -259px; left: -112px; -webkit-animation: move 3.2s infinite 0.2s linear; animation: move 3.2s infinite 0.2s linear; } @-webkit-keyframes move { 100% { -webkit-transform: translate3d(0, -350px, 0); transform: translate3d(0, -350px, 0); } } @keyframes move { 100% { -webkit-transform: translate3d(0, -350px, 0); transform: translate3d(0, -350px, 0); } } </style>
但是你问我具体是怎么实现的
哈哈哈哈哈哈哈。。。。。
在火焰 .g-fire 这个 div 内部，用大量的黑色圆形，由下至上，无规律穿过火焰即可。由于滤镜的融合效果，火焰效果随之产生
4.文字融合动画
效果
HTML代码
<div class="container"> <h1>Hello World!</h1> </div>
CSS代码
<style> .container { width: 100%; height: 100%; position: relative; padding: 2em; -webkit-filter: contrast(20); filter: contrast(20); background-color: black; overflow: hidden; } h1 { font-family: Righteous; color: white; font-size: 4rem; text-transform: uppercase; line-height: 1; -webkit-animation: letterspacing 5s infinite alternate ease-in-out; animation: letterspacing 5s infinite alternate ease-in-out; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); letter-spacing: -2.2rem; } @-webkit-keyframes letterspacing { 0% { letter-spacing: -2.2rem; -webkit-filter: blur(0.3rem); filter: blur(0.3rem); } 50% { -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 100% { letter-spacing: .5rem; -webkit-filter: blur(0rem); filter: blur(0rem); color: #fff; } } @keyframes letterspacing { 0% { letter-spacing: -2.2rem; -webkit-filter: blur(0.3rem); filter: blur(0.3rem); } 50% { -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 100% { letter-spacing: .5rem; -webkit-filter: blur(0rem); filter: blur(0rem); color: #fff; } } </style>
这个效果相对于前两个要简单，只需在字体改变字符间距的同时改变模糊度即可
最后，博文的原出处：http://www.cnblogs.com/coco1s/p/7519460.html
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
