HTML AND CSS CREATE BACK GROUND COLOR CHANGE ANIMATION, LEARN HOW TO CRE...

0 HTML And CSS Cooding August 17, 2022

HTML SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<button id="color">WELCOME</button>

</body>

</html>

CSS SOURCE CODE

body{

margin: 0;

padding: 0;

animation: bgcolor infinite 49s;}

#color{

width: 100px;

height: 50px;

border-color: red;

border-right: 5px groove yellow;

border-top: 5px groove green;

border-bottom: 5px groove blue;

border-left: 5px groove red;

animation: color infinite 45s;

margin-top: 10px;

margin-left: 400px;}

@keyframes bgcolor{

0%{background: red ;}

5%{background: blue ;}

10%{background: purple ;}

15%{background: brown ;}

20%{background: pink ;}

25%{background: yellow ;}

30%{background: skyblue;}

35%{background: darkred;}

40%{background: black;}

45%{background: green;}

50%{background: lightpink;}

55%{background: yellowgreen;}

60%{background: seagreen ;}

65%{background: wheat;}

70%{background: #aaff33;}

75%{background: #3ac54d;}

80%{background: #2daa23;}

85%{background: #ffddaa;}

90%{background: #aa22ee;}

95%{background: #cc55ff;}

100%{background: #3cdd;}}

@keyframes color {

0%{background: red ;}

5%{background: blue ;}

10%{background: purple ;}

15%{background: brown ;}

20%{background: pink ;}

25%{background: yellow ;}

30%{background: skyblue;}

35%{background: darkred;}

40%{background: black;}

45%{background: green;}

50%{background: lightpink;}

55%{background: yellowgreen;}

60%{background: seagreen ;}

65%{background: wheat;}

70%{background: #aaff33;}

75%{background: #3ac54d;}

80%{background: #2daa23;}

85%{background: #ffddaa;}

90%{background: #aa22ee;}

95%{background: #cc55ff;}

100%{background: #3cdd;}}

Tags

HTML CSS HTML_CSS_WEBSITE

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.