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

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

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

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

<div class="btn"></div>

.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也可）

<div class="btn_save">搜索<div class="btn_save_hover">搜索</div>
</div>

.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 背景渐变色实现过渡效果相关推荐

css3 实现背景渐变色与背景图片并存效果
css3 实现背景渐变色与背景图片并存效果先看效果背景是渐变色+浅色透明图案组成,UI没有完全切成一张图,刚好试试看能不能使用背景渐变+图片的效果. 对兼容性要求高的不要这样做,直接叫UI切合成 ...
CSS3渐变色与过渡效果
CSS3渐变色与过渡效果 CSS渐变色介绍线性渐变语法线性渐变线性渐变 - 对角线性渐变-角度值单位(deg) 可以设置多个颜色渐变使用透明度(transparent)颜色用rgab() ...
android自定义渐变色,Android设置背景渐变色
效果如图,本章只谈背景渐变色,仪表盘下一篇文章实现步骤,只需两步: 1.在res/drawable中新建一个gradual_color_bg.xml 内容如下: android:startColor ...
css3-3 css3背景样式
css3-3 css3背景样式一.总结一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
百度SEO网页背景渐变色代码
很漂亮网页背景渐变色代码,背景颜色不断变换,用来做网站背景还是挺不错的下载地址: http://www.bytepan.com/77DYghsNOdA
UIView设置背景渐变色
UIView设置背景渐变色 // Allocate bitmap context CGContextRef bitmapContext = CGBitmapContextCreate(NULL, 32 ...
html div background-image,css3背景background-image
css3背景background-image CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background-size background-origin ...
echarts5.0引入地图，背景渐变色，航线图，地图阴影
效果图如下,文章末尾附全部代码: 参考: 1.航线图 Vue Echarts飞机航线图_Kinghiee的博客-CSDN博客 2.地图阴影 echarts中国地图实现阴影效果&自定义设置_K ...
html设置body渐变色,css-body背景渐变色的CSS
css-body背景渐变色的CSS 一.从上往下渐变 body{ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,s ...

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

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

方法二：写两层按钮，通过改变透明度opacity实现过渡（利用伪类before、after也可）

css3 背景渐变色实现过渡效果相关推荐

最新文章

热门文章