javascript - 在 JQuery 中加载文档时淡化主体渐变-6ren

javascript - 在 JQuery 中加载文档时淡化主体渐变

转载作者：太空宇宙更新时间：2023-11-03 22:39:09

所以我开始编写我的网站，我想要发生的是当文档加载时，渐变背景将淡入大约 500 毫秒。但是，无论我尝试什么，我似乎都无法做到这一点。

到目前为止，这是我的代码:

$(function() {
	$('#gradient').css('display', 'none').fadeIn(500)
});

#gradient {
	background: -webkit-radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));
	background: radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/login.js"></script>
        <link rel="stylesheet" type="text/css" href="css/login.css">
        
        <title>Welcome!</title>
    </head>
    <body id="gradient">
    </body>
</html>

我已经尝试了几乎所有方法，但我无法让它褪色!在设置不透明度动画时，渐变保持完全不透明。

谁能帮帮我？

最佳答案

尽量不要淡化主体本身，而是淡化其中的 DOM 元素。我创建了一个新的 DIV 层，将其命名为 #gradient 并将其设置为 display none。

$(function() {
	$('#gradient').fadeIn(500)
});

#gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    background: -webkit-radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));
    background: radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/login.js"></script>
        <link rel="stylesheet" type="text/css" href="css/login.css">
        
        <title>Welcome!</title>
    </head>
    <body>
        <div id="gradient"></div>
    </body>
</html>

关于javascript - 在 JQuery 中加载文档时淡化主体渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44762290/