前言
点赞 + 珍藏 = 学会了
在线展现
[代码仓库]()
先看看最终成果
这个成果非常简单，只有看完实现原理应该就是有思路了。
️原理
- 规定好容器尺寸
- 设置突变背景：
background: linear-gradient(...)本人设置角度和色彩吧 - 设置背景尺寸比容器大几倍：
background-size: 600% 600%; - 搞个循环动画，管制背景挪动：
background-position
入手实现
间接上代码，对照着 『原理』 和 正文 置信你肯定能学废。
<!-- 容器 --><div class="gradient"></div><style> .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%; } }</style>奇思妙想
本例如果不必动画自动播放，能够联合鼠标挪动做交互参考系。
通过鼠标以后所在位置管制背景色的突变成果。
这大略也是视差成果的一种吧，能够联合 《视差特效的原理和实现办法》 的原理实现。
点赞 + 关注 + 珍藏 = 学会了