帮朋友做的一个演示 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 相关参考:
- filter on CSS Tricks
- filter on MDN
- filter on can i use
- Understanding CSS Filter Effects
- Set background color based on outdoor temperature - Stack Overflow
- from green to red color depend on percentage - Stack Overflow
CSS3 Blend Modes 相关参考:
- Blend mode on MDN
- Blend mode on can i use
- CSS Blend Modes could be the next big thing in Web Design
- Basics of CSS Blend Modes
- What is color blending?
技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。
BEST
Lien(A.K.A 胡椒)