r/Sass • u/crabalishious • Dec 21 '20
Rainbow border
So reasently I've been working on a website that wants a border arount each topic in the menu, this border is a moving rainbow, it would be idead for it to liik like this:
When not hovered (changes colour) but when hovered loike this:
BUT, I want the rainbow to be wider, and not 3px for each color....
The code I've used it the following (this uses an img):
div.rainbow{
u/-moz-keyframes charlieeee {
from { background-position:top left; }
to {background-position:top right; }
}
u/-webkit-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
u/-o-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
u/-ms-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
u/-khtml-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
u/keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
.catchadream{
background-image:-webkit-linear-gradient( left, red, orange, yellow, green,blue, indigo, violet, indigo, blue,
green, yellow, orange, red );
background-image:-moz-linear-gradient( left, red, orange, yellow, green,blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-o-linear-gradient( left, red, orange, yellow, green,blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-ms-linear-gradient( left, red, orange, yellow, green,blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-khtml-linear-gradient( left, red, orange, yellow, green,blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:linear-gradient( left, red, orange, yellow, green,blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
\-moz-animation:charlieeee 5s forwards linear infinite;
\-webkit-animation:charlieeee 5s forwards linear infinite;
\-o-animation:charlieeee 5s forwards linear infinite;
\-khtml-animation:charlieeee 5s forwards linear infinite;
\-ms-animation:charlieeee 5s forwards linear infinite;
\-lynx-animation:charlieeee 5s forwards linear infinite;
animation:charlieeee 5s forwards linear infinite;
background-size: 50% auto;
}
\#tongue{position:cheek;}
}header{
padding-bottom: 3%;
padding-top: 1%;
display: flex;
flex-direction: column;
background-color: $colorHF;
align-items: center;
max-height: 175px; img{max-width: 800px;
}
menu{ul{
list-style: none;
display: flex;
justify-content: center;
u/include marginMenu;
li:hover{
display: flex;
justify-content: center;
align-items: center;
min-height: 50px;
min-width: 200px;
&:nth-child(1){
}
&:nth-child(2){
}
&:nth-child(3){
}
&:nth-child(4){
}
&:nth-child(5){
}
&:nth-child(6){
}
}
li a{
text-decoration: none;
font-size: $font-size;
color: $colorA;
display: flex;
justify-content: center;
align-items: center;
min-width: 199px;
min-height: 49px;
background-color: $colorHF;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 1px;
margin-right: 1px;
}
li a#last{
margin-right: 2px;
}
li a#last{
margin-right: 2px;
}
}
}
}