笔记:开关灯,色温调节效果


帮朋友做的一个演示 Demo,酒店房间里的灯,打开关闭整个场景的亮度变化,以及色温的调节:

  • 开关灯的效果配合 transition 属使切换两张图(一张开灯,一张关灯);
  • 亮度变化使用 CSS3 filter (MDN) 中的 brightness
  • 最后一个色温的变化,尝试了几个方法,本来准备使用 CSS3 filter 中的 hue 来给图片直接调色,无奈实际效果并不是很好;之后使用了一个加简单的方式:直接盖一层 alpha 值适当的层,之后控制这个层的色温,通过层和图片重叠在一起假造了一个色温的变化,看上去还算顺眼。

调节层的颜色:

把具体效果抽出来放在了 CodePen 上 control image brightness, color temperature, and turn light on and off,效果预览:

See the Pen control image brightness, color temperature, and turn light on and off by Lien (@movii) on CodePen.

Demo 中背景图片使用 CSS3 的 transition 来做切换,因为朋友最终用于演示的设备是 iOS 系统,其中是 Webkit 为引擎的浏览器,所以有个问题被忽略。但在一般开发中需要注意: transition 一般并不能作用于 background-image 这个样式属性(至少没有被规定成一个 CSS animated property)

Webkit 的 Chrome 和 Safari 貌似都做了支持,Firebox 就没有,使用它预览 demo 缓动过度的效果就不会出现。解决可以参考一些 heck 手段,采用 z-index 选择性配合 opacity 来对层的现实进行控制。

参考:

制作过程中还发现了很有意思 CSS Blend Mode (MDN),找了一个别人制作的 pen,预览效果如下,感觉和 Photoshop 中 blend mode 类似(鼠标在区域里滑动来显示不同效果):

See the Pen background-blend-mode in action by Bennett Feely (@bennettfeely) on CodePen.

参考 & 衍生阅读

CSS3 Filter 相关参考:

CSS3 Blend Modes 相关参考:

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量