HTML AND CSS CREATE BACK GROUND COLOR CHANGE ANIMATION, LEARN HOW TO CRE...
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;}}
