gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 22:39:09 26 4
gpt4 key购买 nike

所以我开始编写我的网站,我想要发生的是当文档加载时,渐变背景将淡入大约 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com