CSS 实现 光圈效果

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

HTML:

CSS:

预览效果入如下：

光圈的作用如下：

1、控制景深

控制画面景深是很多人对光圈的第一认识，所以这里就先说光圈控制景深的事情。关于光圈控制景深大家记住一句话就行：光圈越大，画面景深越浅（背景模糊）；光圈越小，画面景深越深（背景清晰）。

2、光圈影响光量

光圈影响着镜头的进光量，当快门速度、感光度不变的情况下：光圈越大，镜头进光量越多，画面越亮；光圈越小，镜头进光量越少，画面越暗。

这个原理很简单，光圈大表示孔径大，那么在单位时间内通过的光量自然多，画面也就亮；光圈大表示孔径小，那么在单位时间内通过的光量自然少，画面也就暗。

3、光圈可以虚化前景

光圈除了可以虚化背景，还可以虚化前景，关于这个给大家举个例子吧。比如前两天在拍荷花的时候，我不仅要背景虚化，呈现出朦胧的背景，我还需要前景虚化，营造出朦胧的前景，所以我稍微把光圈调大些，就能得到一个非常朦胧的前景了。

大家拍摄的场景中铁丝网、栏杆等遮挡的东西，大家可以用稍微大一点的光圈来虚化前景，这样能减少这些遮挡物的干扰。

4、小光圈拍出星芒效果

当大家拍摄的画面中有光源点，大家可以使用稍微小一点的光圈拍摄，这样能拍出很漂亮的星芒线。一般来说把光圈缩小到f/11或者更小就能拍出不错的星芒效果了，但是这个也要看光源和镜头，有些镜头即使大一点的光圈也能拍出不错的星芒效果。

5、大光圈拍出梦幻光斑

大家在拍摄夜景时可以利用大光圈进行拍摄，如果你的背景中有很多光源，那么就会拍出很梦幻的光斑效果。因为你用大光圈进行拍摄，光圈越大，画面的景深就越浅，那么画面的背景就会变得很模糊，背景中的光源就会变得很散，从而出现梦幻的光斑效果。

6、小光圈可以检验镜头清洁度

想要知道你镜头脏不脏，你使用小光圈一拍就知道了。大家可以把光圈调小，然后对着白色的纸或者墙拍一张照片，如果画面有脏点说明脏了或者是进灰了。

小光圈能让你镜头上或者镜头内部的污物更加明显，如果不严重可以接受那没什么问题，如果真的很严重了，就拿去清洁，可别想着小光圈不怎么用就不管了，真到了用的那天就来不及了。

---