纯css实现动态渐变背景，一分钟学会
前言
点赞 + 收藏 = 学会了
?在线展示
[?代码仓库]()
先看看最终效果
这个效果非常简单，只要看完实现原理应该就是有思路了。
?原理
文章图片
- 规定好容器尺寸
- 设置渐变背景：
background: linear-gradient(...)自己设置角度和颜色吧 - 设置背景尺寸比容器大几倍：
background-size: 600% 600%; - 搞个循环动画，控制背景移动：
background-position
动手实现 直接上代码，对照着 『原理』 和 注释 相信你一定能学废。
.gradient {
/* 设置容器尺寸 - 原理1 */
width: 400px;
height: 400px;
/* 背景渐变色 - 原理2 */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 背景尺寸 - 原理3 */
background-size: 600% 600%;
/* 循环动画 - 原理4 */
animation: gradientBG 5s ease infinite;
}/* 动画，控制背景 background-position */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
奇思妙想 本例如果不用动画自动播放，可以结合鼠标移动做交互参考系。
通过鼠标当前所在位置控制背景色的渐变效果。
这大概也是视差效果的一种吧，可以结合 《视差特效的原理和实现方法》 的原理实现。
【纯css实现动态渐变背景，一分钟学会】点赞 + 关注 + 收藏 = 学会了
推荐阅读
- javascript实现倒计时小案例
- SpringBoot+RabbitMQ|SpringBoot+RabbitMQ 实现死信队列的示例
- CSS中提升优先级属性!important的用法总结
- Vue3中实现路由跳转的过渡动画(一)
- 山东大学-VirtualJudge-总结9
- c语言|如何用C语言实现小游戏——扫雷
- c语言|如何用C语言来实现——五子棋游戏
- 安装系统 重装系统之家win7纯净版gho系统后检测不到U盘怎样处理
- 查看系统之家纯净win7系统进程PID标识符的技巧
- 系统之家精简纯净win7系统出现winlogon.exe应用程序出错的处理办法