几种实现动态渐变的方法

直接进入主题,有这样几种渐变方法。

一、transition过渡background-color

background-img并不支持transition方法,但是background-color可以,所以可以有渐变色彩的效果实现




    
mark

二、transition过渡background

虽然background-img不支持transition,但是我们可以变相用background-position来支持transition实现渐变




    
mark

三、hover伪元素改变opacity覆盖实现“渐变”




    
mark

实际上这里是一个颜色叠加

四、借助CSS houdini中的Properties & Values API实现变化效果。




    
mark

更多有趣的方法欢迎大佬指出

你可能感兴趣的:(几种实现动态渐变的方法)