CSS3过渡：在2个不同的渐变色之间进行动画处理

css3 背景渐变色实现过渡效果（css给渐变色添加过渡动画）

众所周知的是在css3并不支持两种渐变色之间进行平滑的过渡(transition属性不生效)

但是这不代表这我门就没办法实现

虽然渐变色之间不支持平滑过渡（transition属性），但是我们可以控制两张图片切换的时候有过渡动画。

so,我们直接上代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}img {display: block;}.box {width: 100px;height: 100px;background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);margin-bottom: 20px;}</style>
</head>
<body>
<div class="box"></div>
</body>
<script>let canvas = document.createElement('canvas')canvas.width = 100canvas.height = 100;let ctx = canvas.getContext('2d')let grad = ctx.createLinearGradient(0, 100, 100, 100)grad.addColorStop(0, "#a8edea");                  //定义渐变色颜色grad.addColorStop(1, "#fed6e3");ctx.fillStyle = grad;                         //设置fillStyle为当前的渐变对象ctx.fillRect(0, 0, 100, 100);let image = new Image();let imgBase = canvas.toDataURL('image/png', 1);image.src = imgBasedocument.body.append(canvas)document.body.append(image)
</script>
</html>

以上的代码只是实现了把一个渐变色转成渐变色图片的过程

既然都转成了图片，那么就可以实现背景图片之间的切换动画了吧也就是所有的动画属性都可以用了当然也包括 transition 属性

这下就可以感受到多种渐变色之间丝滑的过渡动画了

剩下的工作就交给你们自己了

CSS3过渡：在2个不同的渐变色之间进行动画处理相关推荐

css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
好程序员web前端技术之CSS3过渡
好程序员web前端技术之CSS3过渡,css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改 ...
从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡语法: transition: 过渡属性过渡时间延迟时间过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
CSS3过渡练习-进度条（CSS3）
CSS3过渡练习-进度条(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
CSS3 过渡-盒子切换之鼠标经过背景高亮
CSS3 过渡-盒子切换之鼠标经过背景高亮源码: <!DOCTYPE html> <html lang="en"><head><meta ...
css过渡取消过渡_CSS基础知识：CSS3过渡
css过渡取消过渡随着CSS3在网络上的推广,它带来了一些有趣的新演示技术. 今天,我们将回顾使用CSS3过渡和动画的基础知识,以增加额外的修饰. 本教程包括Tuts + Premium成员可用的 ...
CSS3过渡延迟总结
CSS3过渡延迟总结 1. 元素状态 2. 过渡实现 2.1 设置哪些属性应用过渡效果 2.2 js过渡完成事件监听API 2.3 设置过渡时间 2.4 控制过渡效果的速度 2.4.1 平滑过渡 2. ...
html中设置过渡效果,CSS3 过渡
CSS3 过渡 CSS3 过渡通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到下面的元素上: ...
html过渡的触发机制是什么,CSS3过渡 transition
之前我们整理了CSS3中的动画属性 Transform 转换,今天我们接着一起来看看CSS3中的另一个动画属性 Transition 过渡. W3C标准中对css3的transition这是样描述的: ...

CSS3过渡：在2个不同的渐变色之间进行动画处理

CSS3过渡：在2个不同的渐变色之间进行动画处理相关推荐

最新文章

热门文章