CSS 实现 光圈效果

html-css014

CSS 实现 光圈效果,第1张

主要利用css3 animation， 在0 ~ 100% 过渡中让box-shadow渐变（box-shadow只需要设置blur 和spread）

HTML:

CSS:

预览效果入如下：

我想如果

只要字体和图片产生阴影效果

用滤镜Shadow就可以实现呀

Filter：Shadow（Color=color，Direction=direction）

可以在指定的方向建立投影，Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255

使对象的边缘产生类似发光的效可用滤镜

Filter：Glow（Color=color，Strength=strength）

Direction参数用来指定投影的方向

举个例，比如说你想让你的空间名产生发光和阴影效果，可以这样写

#header div.tit{top:4pxLEFT:100pxfont-size:30pxfont-family:楷体FILTER:Glow(Color=#33ADFF,Strength=4) Shadow(Color=#003355,Direction=180)color:#FFF}