Question

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

我已经尝试了所有的东西，但我不能让它褪色！在对不透明度进行动画处理时，渐变保持完全不透明。

有人能帮助我吗？

Answer 1

尽量不要褪色身体本身，而是将其中的DOM元素褪色。我创建了一个名为EVP_[En/De]cryptFinal_ex(..)的新DIV图层，并将其设置为Processing Adapter = com.mashery.proxy.core.add-headers-processor Perform Pre-processing = Enabled Data to make available for pre-processing = headername:testvalue.。

＆＃13;

#gradient

＆＃13;

display none

＆＃13;

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

＆＃13;

Answer 2

您也可以使用 .animate 。

JQuery的：

$(document).ready(function(){

    $('#gradient').animate({ opacity: 1 }, 5000);       
});

CSS：

html, body {
    margin    : 0;
    height    : 100%;
    min-height: 100%;
}

#gradient {
  background: -webkit-radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));
  background: radial-gradient(rgb(0, 134, 255), rgb(0, 62, 123));  
  width:100%;
  height:100%;
  opacity: 0;
}

HTML：

<body>
   <div id="gradient">

    </div>
</body>

JQuery

2 个答案: