如果想实现色彩变动的动效,能够思考应用色调旋转滤镜:filter:hue-rotate()
filter 是个功能强大的办法,能够给元素增加各种各样的滤镜,比方含糊、暗影、变灰等等。
hue-rotate 能够扭转元素的色调,展现出更丑陋的色彩。
案例1:设置按钮的背景色
<button style="background: #2486ff;filter: hue-rotate(350deg);">按钮</button>
然而,单纯设置背景色的话,色调变动多少不好把握,而且个别UI会给出具体的色彩值。
所以,hue-rotate更适宜做色彩变动的动效。
案例2:高亮文字色彩闪动变动
<span>啦啦啦</span>span { background: red; animation: hue 3s;}@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(-360deg); }}