CSS 实现 光圈效果

html-css014

CSS 实现 光圈效果,第1张

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

HTML:

CSS:

预览效果入如下：

要让按钮做到有凹凸感，实际上就是利用光线照射来形成阴影的原理。

这是最简单也是最常见的一种，光线从左上方照过来，使按钮的右侧和下方形成深色阴影（可以根据需要调节边框的宽度和颜色）：

<input type="button" value="有凹凸感的按扭" style="border:1px solid #dddborder-bottom:1px solid #333border-right:1px solid #333" />

我想如果

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

用滤镜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}