Recent Posts

Home / All / HTML / Live Changing Background in HTML - HTML CSS Tutorial

Live Changing Background in HTML - HTML CSS Tutorial

,

How To Create Live Changing Background in HTML.


HTML Code 

  1. <html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>live change background color in html css </title>
  5.     <link href="css/mycss.css" rel="stylesheet">
  6. </head> 
  7. <body>
  8.     <h1>Coming Soon</h1>
  9. </body>
  10. </html>


CSS Code

  1. body
  2. {
  3.     margin: 0px;
  4.     padding: 0px;
  5.     animation: live_bgcolor infinite 20s;
  6. }   
  7. h1
  8. {
  9.     margin:300px auto auto auto;
  10.     padding: 0px;
  11.     font-family: Verdana;
  12.     font-size: 70px;
  13.     color: #fff;
  14.     text-align: center;
  15. }
  16. @keyframes live_bgcolor
  17. {
  18.     0%
  19.     {
  20.         background-color: #2ecc71;
  21.     }
  22.     10%
  23.     {
  24.         background-color: #27ae60;
  25.     }
  26.     20%
  27.     {
  28.         background-color: #1abc9c;
  29.     }
  30.     30%
  31.     {
  32.         background-color: #16a085;
  33.     }
  34.     40%
  35.     {
  36.         background-color: #3498db;
  37.     }
  38.     50%
  39.     {
  40.         background-color: #2980b9;
  41.     }
  42.     60%
  43.     {
  44.         background-color: #8e44ad;
  45.     }
  46.     70%
  47.     {
  48.         background-color: #e74c3c;
  49.     }
  50.     80%
  51.     {
  52.         background-color: #e67e22;
  53.     }
  54.     90%
  55.     {
  56.         background-color: #d35400;
  57.     }
  58.     100%
  59.     {
  60.         background-color: #f39c12;
  61.     }
  62. }

Output:

 Output 1
change background color using jquery, toggle background color javascript, set background color java, javascript change font color, write the attributes of body tag, javascript change background image, html5 video fullscreen control, youtube video background html5, responsive video background codepen, bootstrap jumbotron video background html5 video full width fixed height, background video css, html background image full screen, css background image size, css background image position, css background image not showing, css background image opacity, background image no repeat, html text background color box, html background color tag, html font color codes how to add background in html, html table background color, html bold tag

 Output 2
change background color using jquery, toggle background color javascript, set background color java, javascript change font color, write the attributes of body tag, javascript change background image, html5 video fullscreen control, youtube video background html5, responsive video background codepen, bootstrap jumbotron video background html5 video full width fixed height, background video css, html background image full screen, css background image size, css background image position, css background image not showing, css background image opacity, background image no repeat, html text background color box, html background color tag, html font color codes how to add background in html, html table background color, html bold tag



Other Blog


   


You May Also Like

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.