background-image 不支持CSS3 transition ，而CSS3 gradient渐变作为背景图片存在的时候，下面的CSS设置是不会有过渡效果的。
.gradient {
background-image: linear-gradient(to right, olive, green)
transition: background-image 0.5s linear
}
.gradient:hover {
background-image: linear-gradient(to right, green, purple)
}
鼠标hover会发现渐变的变化是很唐突的，一点过渡效果也没有。
下面问题来了，如果我们希望实现渐变hover时候有过渡变化的效果，该如何实现呢？我这里罗列的几种可行的方法。
二、借助background-position实现渐变过渡
background-image 虽然不支持CSS3 transition 过渡，但是 background-position 支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下(鼠标hover)：
相关代码如下：
.box {
max-width: 400px
height: 200px
background: linear-gradient(to right, olive, green, purple)
background-size: 200%
transition: background-position .5s
}
.box:hover {
background-position: 100% 0
}
三、借助background-color实现渐变过渡
background-image 虽然不支持CSS3 transition 过渡，但是 background-color 支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
相关代码如下:
.box {
max-width: 400px
height: 200px
background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5))
transition: background-color .5s
}
.box:hover {
background-color: purple
}
四、借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
.box {
max-width: 400pxheight: 200px
background: linear-gradient(to right, olive, green)
position: relative
z-index: 0
}
.box::before {
content: ''
position: absolute
left: 0top: 0right: 0bottom: 0
background: linear-gradient(to right, green, purple)
opacity: 0
transition: opacity .5s
z-index: -1
}
.box:hover::before {
opacity: 1
}
五、结束语
以上就是我所知道的几个方法，当然，肯定还有其他更好的实现，欢迎补充。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
html 图片的过渡效果
京东年货节特惠来袭！精华礼盒现购超值
京东
广告
《风尚坐火箭学习vue》-- 第十二章：Vue中的动画transition
174阅读·0评论·1点赞
2021年11月26日
image target behaviour 和image target的关系_CSS3中用background-image实现粒子动画效果
26阅读·0评论·0点赞
2020年11月20日
background-image的用法
13.8W阅读·2评论·33点赞
2016年9月9日
background-image 详解
1.0W阅读·1评论·7点赞
2014年11月17日
html文字图片过度效果,如何在图片上应用css3过渡属性？
510阅读·0评论·0点赞
2021年6月11日
HTML CSS 动画 实现图片过渡与变换（图片不超过边框范围局部放大）
1499阅读·1评论·4点赞
2021年11月25日
京东年货节，小年狂欢开启！酵素饮料现购超划算，速戳~
京东
广告
html 图片的过渡效果,3个CSS3图片过渡动画特效
1880阅读·0评论·1点赞
2021年6月11日
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: aqua
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 10px 5px 5px black
}
.d2 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 5px black
}
.d3 {
width: 600px
height: 200px
margin: 0 auto
font-size: 50px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red
/* 动画 */
animation: donghua 3s infinite alternate
}
@keyframes donghua {
from {
text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, 0px 0px 10px orangered, 0px 0px 5px red
}
to {
text-shadow: 0px 0px 10px yellow, 0px 0px 5px orange, 0px 0px 5px orangered, 0px 0px 2px red
}
}
.d4 {
width: 600px
height: 200px
margin: 0 auto
font-size: 100px
/* 设置字体：设置的字体必须在系统里面试存在的，如果没有这个字体，就会默认按照系统字体样式显示。 */
font-family: "微软雅黑"
/* 设置字体的粗细，100-900，默认正常的字体粗细，但是比如说如果你设置900，最粗的字体，但是如果你的系统没有这样粗的字体，依然会按照默认的样式显示。 */
font-weight: normal
/* 字体颜色 */
color: #fff
/* 设置字体排布 ，默认向左, left,center,right*/
text-align: center
/* 文字的行高 */
line-height: 200px
/* 文字阴影
text-shadow:水平偏移距离 垂直的偏移距离 模糊度 阴影的颜色
*/
text-shadow: 1px 1px 0px yellow, 2px 2px 0px yellow, 3px 3px 0px orange, 4px 4px 0px orange, 5px 5px 0px orange, 6px 6px 0px orangered, 7px 7px 0px red, 8px 8px 0px red
}
</style>
</head>
<body>
<div class="d1">
helloworld
</div>
<div class="d2">
helloworld
</div>
<div class="d3">
helloworld
</div>
<div class="d4">
helloworld
</div>
</body>
</html>
语法 transition: property duration timing-function delay
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d1 {
width: 100px
height: 100px
background: skyblue
/* 过渡效果,综合性过渡效果设置 */
/* transition: width 2s*/
/* 设置具有过渡效果的属性
可以设置多个值：width,background
也可以一次性设置所有都需要过渡 all
*/
ç-property: all
/* 过渡的时间长度 */
transition-duration: 2s
/* 整个过渡动画变化的速度
ease:（默认值），从慢到快在慢下来
linear:设置线性速度
ease-in:从慢到快的变化过程
ease-out:从快到慢的过程
可以通过浏览器进行调节获取贝塞尔曲线
cubic-bezier(0, 0.95, 1, 0.07)
*/
transition-timing-function: ease
/* 设置延迟时间 */
/* transition-delay: 3s*/
}
#d1:hover {
width: 800px
height: 100px
background: orange
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
例子2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d1 {
width: 300px
height: 400px
margin: 20px auto
background: skyblue
box-shadow: 0 0 0px #ccc
transition: all 0.5s ease
}
.d1:hover {
box-shadow: 0px 5px 10px #999
}
</style>
</head>
<body>
<div class="d1">
</div>
</body>
</html>
XHTML1.0为我们提供了三种DOCTYPE：1 . 过渡型（Transitional）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
2 . 严格型（Strict）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
3 . 框架型（Frameset）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" >
过渡型兼容表格、标识等，对于初学者来说，选择过渡型就可以啦！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）