??前言
點(diǎn)贊 + 收藏 = 學(xué)會了
先看看最終效果
這個效果非常簡單种柑，只要看完實(shí)現(xiàn)原理應(yīng)該就是有思路了岗仑。
file
???原理
file
- 規(guī)定好容器尺寸
- 設(shè)置漸變背景：
background: linear-gradient(...)自己設(shè)置角度和顏色吧 - 設(shè)置背景尺寸比容器大幾倍：
background-size: 600% 600%; - 搞個循環(huán)動畫，控制背景移動：
background-position
??動手實(shí)現(xiàn)
直接上代碼聚请，對照著 『原理』 和 注釋 相信你一定能學(xué)廢荠雕。
<!-- 容器 -->
<div class="gradient"></div>
<style>
.gradient {
/* 設(shè)置容器尺寸 - 原理1 */
width: 400px;
height: 400px;
/* 背景漸變色 - 原理2 */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 背景尺寸 - 原理3 */
background-size: 600% 600%;
/* 循環(huán)動畫 - 原理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>
??奇思妙想
本例如果不用動畫自動播放驶赏，可以結(jié)合鼠標(biāo)移動做交互參考系炸卑。
通過鼠標(biāo)當(dāng)前所在位置控制背景色的漸變效果。
這大概也是視差效果的一種吧煤傍，可以結(jié)合 《視差特效的原理和實(shí)現(xiàn)方法》 的原理實(shí)現(xiàn)盖文。
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會了
