ロード時に背景色を消す方法は？

Question

私はプロジェクトに取り組んでいます。私は考えていました。ページへのリダイレクトを背景色：Rebecca Purpleから＃666（灰色がかった色）にフェードアウトさせることで、シームレスに見えるようにするといいでしょう。

非常に奇妙なアイデアのようですね。私は1.5秒のトランジションを望み、カラーフェードやトランジションタイムなどをコントロールするためにJavaScriptを使用します。

唯一の問題は私のアイデアが奇妙なためです。チュートリアルはありません。

Answer 1

あなたはonreadyイベントバインディングを使用して、JavaScriptでクラスを変更し、CSSでの移行遅延：

<div id="test" class="mainstyle style1"> 
    <p> 
    hello 
    </p> 
</div> 

CSS：

.style1{background-color: white;} 
.style2{background-color:blue;} 
.mainstyle{ 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    transition-delay:2s; 
    width:250px;} 

のJavaScript（jQueryの）

$(function() { 
$('#test').addClass('style2'); 
    $('#test').removeClass('style1'); 
}); 

See the JsFiddle

を

楽しいです！

Answer 2

$(function(){ 
 
    $('.loaded').css('background','red').css('color','blue'); 
 
});

.loaded { 
 
    transition: 1.5s; 
 
    color: black; 
 
    background: yellow; 
 
} 
 
Try this! =)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="loaded">Food!</div>

Answer 3

あなたはHSL色空間を試みること、それは見て非常に素晴らしく、自然なグラデーションを生成します。