一、使用CSS3实现渐变动画
CSS3中提供了gradient（渐变）属性，可以帮助我们实现图片渐变动画效果。下面是一个示例代码：
.box{
width: 300px;
height: 300px;
background:
/* 渐变颜色开始 */
linear-gradient(to right, #f00, #0f0)
/* 渐变颜色结束，这里的百分比可以控制从何处开始变化 */
50% 50% / 0 0 no-repeat;
transition: background-size 0.5s ease; /* 动画效果，可以自行调整属性值 */
}
.box:hover{
background-size: 100% 100%; /* 改变背景大小，使渐变生效 */
}这段代码中，我们使用了linear-gradient属性来实现渐变效果，to right表示从左到右，#f00表示开始颜色红色，#0f0表示结束颜色绿色。50% 50%控制从哪个位置开始变化，0 0表示渐变效果的大小为0，no-repeat表示不重复渐变。transition属性用于指定动画时间及动画效果。
二、使用JavaScript实现图片渐变动画
除了CSS3，我们还可以使用JavaScript来实现图片渐变效果，这里我们以jQuery库为例：
$('img').mouseenter(function(){
$(this).animate({opacity:0},500,function(){
$(this).css('background','-webkit-gradient(linear, left top, right top, from(#f00), to(#0f0))');
$(this).animate({opacity:1},500);
});
});这段代码中，我们定义鼠标进入img元素的事件，调用jQuery的animate方法实现图片渐变消失的效果，再使用css方法添加渐变背景色，并在动画结束后调用animate方法实现图片重新显示的效果。
三、使用Canvas实现图片渐变动画
在Canvas中，我们可以使用createRadialGradient或createLinearGradient方法实现图片渐变效果，接下来是一个Canvas代码示例：
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('img');
var gradient = context.createLinearGradient(0,0,300,0); //创建线性渐变
gradient.addColorStop(0, '#f00'); //开始颜色
gradient.addColorStop(1, '#0f0'); //结束颜色
context.fillStyle = gradient; //将渐变放入填充模式中
context.drawImage(img, 0, 0); //绘制图片
$('canvas').mouseenter(function(){
context.clearRect(0,0,300,300); //清空画布
context.save(); //保存当前状态
context.scale(1.1,1.1); //放大画布
context.drawImage(img, 0, 0); //重新绘制图片
context.restore(); //恢复状态
context.beginPath();
context.rect(0,0,300,300); //绘制矩形框
context.fill(); //填充
});这段代码中，我们创建了一个线性渐变，设置了开始颜色和结束颜色，将渐变放入填充模式中，并使用drawImage方法绘制图片。在鼠标进入canvas元素的事件中，我们清空画布，放大画布，重新绘制图片，绘制一个矩形框并填充渐变色，实现了渐变动画效果。
原创文章，作者：UCRO，如若转载，请注明出处：https://www.506064.com/n/145713.html
微信扫一扫 
支付宝扫一扫 