Difference between revisions of "Team:DUT China B"

Line 245: Line 245:
 
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;
 +
  background: #1D1F20;
 +
  position: relative;
 +
  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%;
 +
}
 +
 +
 +
@-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>
Line 347: Line 403:
 
<div id="almost" style="border: 5px solid #1C2B42;">
 
<div id="almost" style="border: 5px solid #1C2B42;">
 
<!-- partial:index.partial.html -->
 
<!-- partial:index.partial.html -->
−
                 <div style="text-align: center; width: 100%; ">
+
                 <div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>
−
                <p> <center>好is告诉河南分 fr凡人歌</center></p>
+
−
                </div>
+
 
<table class="timeline"  style="border: 0px !important;">
 
<table class="timeline"  style="border: 0px !important;">
 
      
 
      

Revision as of 08:30, 15 October 2019

Document

Animated
CSS
Gradient Border