CSSのみ（jQueryなし）で背景色をフェードインするにはどうすればよいですか？

CSSだけで背景色をフェードインするにはどうすればいいですか（jQueryなし）？ここに私のHTMLは次のとおりです。CSSのみ（jQueryなし）で背景色をフェードインするにはどうすればよいですか？

h1 { 
 
    text-align: center; 
 
    font-size: 500%; 
 
    font-family: sans-serif; 
 
    color: white; 
 

 
} 
 

 
ul { 
 
    display:inline-block; 
 
    color:white; 
 
    margin-left:100px; 
 
    font-size: 200%; 
 
    font-family: sans-serif; 
 
} 
 

 
div { 
 

 
    background: black; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ 
 
    background: -webkit-linear-gradient(top, black); 
 
    background: -webkit-linear-gradient(top, #B00000); 
 
    background: -webkit-linear-gradient(top, #B0C4); 
 
    background: -webkit-linear-gradient(top, #B0C4DE); 
 
    background: linear-gradient(to bottom, #B0C4DE); /* Standard syntax */ 
 
}

<div id="overlay"> 
 
    <h1>Mechanics of JWT</h1> 
 
    <br /> 
 
    <br /> 
 
    <ul> 
 
     <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li> 
 
     <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li> 
 
    </ul> 
 
</div>

出典

2017-05-16 blue-success

チェックアウトhttp://www.colorzilla.com/gradient-editor/それだけでグラデーションあなたのCSSを生成します！ –

あなたはグラデーションを稼働させたいのですか？ https://codepen.io/anon/pen/wdxrgRやアニメーションを何かしようとしていますか？ –

開始カラーストップ、 '線形グラデーション（下、黒、＃B0C4DE）'を忘れました。 – hungerstar

は、あなたが探しているものを、このですか？

h1 { 
 
    text-align: center; 
 
    font-size: 500%; 
 
    font-family: sans-serif; 
 
    color: white; 
 

 
} 
 

 
ul { 
 
    display:inline-block; 
 
    color:white; 
 
    margin-left:100px; 
 
    font-size: 200%; 
 
    font-family: sans-serif; 
 
} 
 

 
div { 
 

 
    background: black; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ 
 
    background: -webkit-linear-gradient(top, black); 
 
    background: -webkit-linear-gradient(top, #B00000); 
 
    background: -webkit-linear-gradient(top, #B0C4); 
 
    background: -webkit-linear-gradient(top, #B0C4DE); 
 
    background: black linear-gradient(black 0, #B0C4DE 100%); /* Standard syntax */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="wingspan.css"> 
 
</head> 
 
<body> 
 

 
    <div id="overlay"> 
 
     <h1>Mechanics of JWT</h1> 
 

 
     <br /> 
 
     <br /> 
 

 
     <ul> 
 
      <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li> 
 
      <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li> 
 
     </ul> 
 
    </div> 
 

 
</body> 
 
</html>

出典

2017-05-16 15:36:07 meteorzeroo

CSSのみ（jQueryなし）で背景色をフェードインするにはどうすればよいですか？

答えて

関連する問題