Difference between revisions of "Team:DUT China B"

Line 1: Line 1:
 
{{DUT_China_B/test_style.css}}
 
{{DUT_China_B/test_style.css}}
−
{{DUT_China_B/test}}
+
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 246: Line 246:
 
text-align: center;
 
text-align: center;
 
}
 
}
 +
      #box {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  width: 400px;
 +
  height: 200px;
 +
  color: white;
 +
  font-family: 'Raleway';
 +
  font-size: 2.5rem;
 +
}
 +
.gradient-border {
 +
  --borderWidth: 3px;
 +
  position: relative;
 +
  border-radius: var(--borderWidth);
 +
  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;
 +
}
 +
 +
 +
 +
@-webkit-keyframes animatedgradient {
 +
0% {
 +
background-position: 0% 50%;
 +
}
 +
50% {
 +
background-position: 100% 50%;
 +
}
 +
100% {
 +
background-position: 0% 50%;
 +
}
 +
}
 +
 +
 +
@keyframes animatedgradient {
 +
0% {
 +
background-position: 0% 50%;
 +
}
 +
50% {
 +
background-position: 100% 50%;
 +
}
 +
100% {
 +
background-position: 0% 50%;
 +
}
 +
}
  
 
</style>
 
</style>

Revision as of 08:54, 15 October 2019

Document

Animated
CSS
Gradient Border