css3 背景渐变色实现过渡效果

前言: 对于设了渐变颜色的background,css会当做背景图片处理,这时直接设过渡transition会没有效果;

整理了两种用过的,给渐变背景加过渡的方法:

方法一:利用background-position,通过改变背景位置实现过渡

在这里插入图片描述

.btn{
	 background: linear-gradient(72deg,rgba(5,120,255,1) 0%,rgba(0,177,255,1) 50%,rgba(0,177,255,1) 100%);
	 background-size: 200%;
	 transition: background-position .3s;
	 &:hover{
	     background-position: 100% 0;
	 }
}

方法二:写两层按钮,通过改变透明度opacity实现过渡(利用伪类before、after也可)

在这里插入图片描述

搜索
搜索
.btn_save{
	text-align: center;
    line-height: 32px;
    background: linear-gradient(70deg, #0578ff 0%, #00afff 100%);
    color: #fff;
    transition: all .3s;
    position: relative;
}
.btn_save_hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #05C1FF 0%, #05C1FF 100%);
    opacity: 0;
    transition: all .3s;
}
.btn_save:hover .btn_save_hover{
    opacity: 1;
}

你可能感兴趣的:(css3,html)