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

浅浅的花香味﹌ 2023-03-01 09:40 19阅读 0赞

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

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

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

![在这里插入图片描述][20200723154353299.gif]

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

![在这里插入图片描述][20200723160553520.gif]

<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;
    }

[20200723154353299.gif]: /images/20230209/27d2762b09d14a98851aa13c1952e527.png
[20200723160553520.gif]: /images/20230209/bdda7c42f8014e3a81d1b4934b43fe0c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3文字扫光渐变色

[css3实现文字扫光渐变动画效果][css3] 利用css3这个属性（背景剪裁）： background-clip: border-box || paddin

秒速五厘米/ 2024年02月18日 21:16/ 0 赞/ 83 阅读

相关 CSS3过渡效果（CSS3）

CSS3过渡效果（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

左手的ㄟ右手/ 2023年10月03日 13:46/ 0 赞/ 29 阅读

相关 css渐变色(css渐变色代码 rgba)

如何制作渐变色的饮？如何制作渐变色的饮料你好这个需要不同密度的酒才可以制作的啊。 ![css渐变色][css] 黑色不能印渐变色吗？黑色也是可以印渐变色的

╰+哭是因爲堅強的太久メ/ 2023年09月26日 13:10/ 0 赞/ 50 阅读

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

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

浅浅的花香味﹌/ 2023年03月01日 09:40/ 0 赞/ 20 阅读

相关背景渐变色

background: linear-gradient( 90deg, \0a5f97 0%, rgba(141, 228, 255, 0.08)

蔚落/ 2022年12月27日 01:53/ 0 赞/ 179 阅读

相关 CSS3实现过渡效果 (transition)

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。 transition 功能：实现元素不同状态之间的平滑过渡。此前

今天药忘吃喽~/ 2022年11月16日 10:53/ 0 赞/ 257 阅读

相关（background）背景/渐变色函数

[https://www.cnblogs.com/ZheOneAndOnly/p/10786375.html][https_www.cnblogs.com_ZheOneAndO

ゞ浴缸里的玫瑰/ 2022年09月02日 01:10/ 0 赞/ 255 阅读

相关网页页面背景渐变色

.bodycolor \{ background: -ms-linear-gradient(left, RGB(192, 242, 233) 0%, RGB(255, 25

r囧r小猫/ 2022年07月11日 01:49/ 0 赞/ 275 阅读

相关 CSS3实现渐变色字体

前两天在学习移动端项目，于是就拿京东的移动端页面来模仿和学习了，在模仿的过程中，我发现了京东移动端页面的字体有渐变色，很是好奇，很感兴趣，于是就是查看了代码，并且百度了一

电玩女神/ 2022年06月04日 01:53/ 0 赞/ 295 阅读

相关 CSS3 - 线性渐变色

解决方法一、 linear-gradient() background-color: red; / 浏览器不支持的时候显示 / backgro

太过爱你忘了你带给我的痛/ 2021年07月26日 11:21/ 0 赞/ 515 阅读