用 css3 的 -webkit-filter 做弥散阴影按钮
今天逛 codepen 看见的一组具有弥散阴影效果的按钮,想到我们射击师提过弥散阴影今年会大热,热不热不造,反正实际效果挺骚包的
下面那一层阴影是:before
伪元素再加上 -webkit-filter
属性里的模糊和发光实现的。
CSS3 里的 -webkit-filter 与 CSS Filter 还是不一样,也不是我们所熟悉的 IE 滤镜,官方的话是通过 CSS 或 SVG 渲染元素概念可以描述的元素,包括它的子元素。
意思就是 css3 的滤镜效果不止能用在图片上,还可以用在其他普通元素上。
but 目前支持这个属性的浏览器少得可怜,只有 Webkit 率先支持了这个属性,没错,意味着只能在最新的 Webkit 内核的浏览器上才能看见效果,比如 Chrome 和 Safari 等等
虽然这么说但用在渐进增强上不也是挺不错的嘛
代码如下:
<button class="diffusion-shadow">follow your heart</button>
.diffusion-shadow {
position: relative;
padding: 20px 30px;
border-radius: 50em;
color: #ffffff;
text-align: center;
font-size: 16px;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
outline: none;
cursor: pointer;
letter-spacing: 0.03em;
text-transform: uppercase;
border: none;
}
.diffusion-shadow,
.diffusion-shadow:before {
background: #52a0fd;
background: -webkit-linear-gradient(left, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
background: linear-gradient(to right, #52a0fd 0%, #00e2fa 80%, #00e2fa 100%);
}
.diffusion-shadow:before {
content: '';
position: absolute;
display: inline-block;
z-index: -1;
height: 40px;
bottom: -5px;
left: 30px;
right: 30px;
border-radius: 30em;
filter: blur(20px) brightness(0.95);
-webkit-filter: blur(20px) brightness(0.95);
}
目录
PREV
翻译:使用 Three.js 开发的 WebGL 3D飞机游戏 PART 1
NEXT