Live Preview
Batton animation css
.ah{
background-image: linear-gradient(45deg,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: gradientAnimation 8s linear infinite;
animation-direction: alternate;
background-size: 300% 100%;
}
@keyframes gradientAnimation {
0% {
background-position: 0
}
to {
background-position: 100%
}
}
Live Preview 2
Container animation css
.shadow:after,.shadow:before {
content: "";
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca,#f8bf3c,#f8bf3c,#84b7ca,#84b7ca);;
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
border-radius: 20px
}
.shadow:after {
filter: blur(20px)
}
@keyframes animate {
0% {
background-position: 0 0
}
50% {
background-position: 300% 0
}
to {
background-position: 0 0
}
}
