我将如何创建移动渐变背景？
A） CSS可以做一个模糊的，如果你与例如刚刚5x4的随机颜色的像素有这样的图像拉伸到一个很小的图像100%中height，并width作为的背景DIV和应用上了沉重的模糊，你的结果可能会类似于。但是，模糊并不适用于所有浏览器，因此您需要为不受支持的浏览器提供后备解决方案。
B）您也可以在CSS. 从理论上说，但我从来没有尝试过这一点，我们可以使多个梯度DIV有层次上的相互利用顶部最小色差opacity通过CSS动画/过渡到层随着时间的推移混合。
下面的代码段需要更多的调整，因为它在浏览器的所有可能的奇怪情况下都不起作用，而且在代码段视图中还有一些在纯 html 中不可见的填充偏移量，因为代码段中缺少一个 body 标记。但是，您要求获得一些指示。我希望您可以优化此代码并与社区分享您的结果。据我所知，它确实适用于 macOS Safari。Firefox 和 Chrome 仍然直接跳转到过渡的末尾。所以我祝你调整愉快！
function startTransitions() {
document.getElementById('gradient-top-left').style.opacity = "0.1";
document.getElementById('gradient-top-right').style.opacity = "0.1";
document.getElementById('gradient-bottom-left').style.opacity = "0.1";
document.getElementById('gradient-bottom-right').style.opacity = "0.1";
document.getElementById('colors').style.opacity = "1.0";
}
document.addEventListener('DOMContentLoaded', function() {
startTransitions();
});#canvas {
margin: 0px;
padding 0px;
}
#colors {
position: absolute;
margin: 0px;
background-image: url(http://testing.2x2p.com/gradient/colors.png);
background-size: cover;
min-height: 100%;
min-width: 100%;
filter: blur(120px);
-webkit-filter: blur(120px);
z-index: 1;
opacity: 0.0;
-webkit-transition: opacity 6s ease-in-out 1s;
-moz-transition: opacity 6s ease-in-out 1s;
-ms-transition: opacity 6s ease-in-out 1s;
-o-transition: opacity 6s ease-in-out 1s;
transition: opacity 6s ease-in-out 1s;
}
#gradient-top-left {
margin: 0px;
position: absolute;
background-color: #000;
min-height: 100%;
min-width: 100%;
background-image: linear-gradient(to bottom right, orange, white);
z-index: 2;
-webkit-transition: opacity 5s ease-in-out 2s;
-moz-transition: opacity 5s ease-in-out 2s;
-ms-transition: opacity 5s ease-in-out 2s;
-o-transition: opacity 5s ease-in-out 2s;
transition: opacity 5s ease-in-out 2s;
}
#gradient-top-right {
margin: 0px;
position: absolute;
background-color: #000;
min-height: 100%;
min-width: 100%;
background-image: linear-gradient(to bottom left, lightgreen, white);
opacity: 0.7;
z-index: 3;
-webkit-transition: opacity 3s ease-in-out 4s;
-moz-transition: opacity 3s ease-in-out 4s;
-ms-transition: opacity 3s ease-in-out 4s;
-o-transition: opacity 3s ease-in-out 4s;
transition: opacity 3s ease-in-out 4s;
}
#gradient-bottom-left {
margin: 0px;
position: absolute;
background-color: #000;
min-height: 100%;
min-width: 100%;
background-image: linear-gradient(to top right, pink, white);
opacity: 0.7;
z-index: 4;
-webkit-transition: opacity 4s ease-in-out 3s;
-moz-transition: opacity 4s ease-in-out 3s;
-ms-transition: opacity 4s ease-in-out 3s;
-o-transition: opacity 4s ease-in-out 3s;
transition: opacity 4s ease-in-out 3s;
}
#gradient-bottom-right {
margin: 0px;
position: absolute;
background-color: #000;
min-height: 100%;
min-width: 100%;
background-image: linear-gradient(to top left, lightblue, white);
opacity: 0.7;
z-index: 5;
-webkit-transition: opacity 6s ease-in-out 1s;
-moz-transition: opacity 6s ease-in-out 1s;
-ms-transition: opacity 6s ease-in-out 1s;
-o-transition: opacity 6s ease-in-out 1s;
transition: opacity 6s ease-in-out 1s;
}<div id="canvas">
<div id="colors"> </div>
<div id="gradient-top-left"> </div>
<div id="gradient-top-right"> </div>
<div id="gradient-bottom-left"> </div>
<div id="gradient-bottom-right"> </div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句