图片亮度变化动效

难度系数

☆☆

效果图

思路

（1）CSS 动画效果依赖于以下知识点的掌握：

• animation 属性
• @keyframes 自定义动画规则

（2）图片亮度变化需要用到 filter 属性的 brightness 方法。brightness 的介绍如下：

• brightness 会给 DOM 元素应用亮度的线性变化效果
• 其值为百分数时，如果值是 0%，图像会全黑；值是 100%，则图像无变化；超过100%，元素亮度线性增加
• 其值为整数时，对应于百分数的效果。0 对应于 0%，1 对应于 100%，3 对应于 300%，以此类推
• IE 不支持 filter 属性

HTML

<div id="container">
    <img class="brighter-img" src="rabbit.jpg" />
</div>

解