Sunday, July 12, 2020

BACKGROUND CSS

GRADIENT BACKGROUND ANIMATION
HTML

 <!DOCTYPE html>
<html>
<head>
    <title>GRADIENT BACKGROUND ANIMATION</title>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>




CSS

body {
  margin:0;
}
.wrapper {
    width: 100%;
    height: auto;
    position: absolute;
    background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
    background-size: 600% 100%;
    animation: gradient 5s linear infinite;
    animation-direction: alternate;
    background-repeat: no-repeat;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}

} 
RESPONSIVE WEBPAGE FOR MOBILE
[class*="col-"] {
  width: 100%;}

posted by Vikas Singh @ July 12, 2020   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home