Difference between revisions of "Team:DUT China B"

Line 257: Line 257:
 
.gradient-border {
 
.gradient-border {
 
   --borderWidth: 3px;
 
   --borderWidth: 3px;
−
   background:#1C2B42;
+
   background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
 
   position: relative;
 
   position: relative;
 
   border-radius: var(--borderWidth);
 
   border-radius: var(--borderWidth);
−
}
 
−
.gradient-border:after {
 
−
  content: '';
 
−
  position: absolute;
 
−
  top: calc(-1 * var(--borderWidth));
 
−
  left: calc(-1 * var(--borderWidth));
 
−
  height: calc(100% + var(--borderWidth) * 2);
 
−
  width: calc(100% + var(--borderWidth) * 2);
 
−
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
 
−
  border-radius: calc(2 * var(--borderWidth));
 
−
  z-index:-1;
 
−
  -webkit-animation: animatedgradient 3s ease alternate infinite;
 
−
          animation: animatedgradient 3s ease alternate infinite;
 
−
  background-size: 300% 300%;
 
 
}
 
}
  

Revision as of 08:41, 15 October 2019

Document

Animated
CSS
Gradient Border