Difference between revisions of "Template:UIUC Illinois STYLE2"

Line 15: Line 15:
  
  
−
:root {
 
−
  --bg-color: radial-gradient(circle at center, #ffffff, #cccccc);
 
−
  --dot-color1: deepskyblue;
 
−
  --dot-color2: #000;
 
−
}
 
−
 
−
 
−
.dna {
 
−
  left: 200px;
 
−
  position:relative;
 
−
  top: 300px;
 
−
  width: 360px;
 
−
  height: 70px;
 
−
  perspective: 400px;
 
−
  transform-style: preserve-3d;
 
−
}
 
−
 
−
.ele {
 
−
  width: 1px;
 
−
  height: 70px;
 
−
  float: left;
 
−
  margin: 0 8px;
 
−
  border-left: 1px #B0B0B0 dashed;
 
−
  position: relative;
 
−
  transform: rotateX(-360deg);
 
−
  animation: run 2s linear infinite;
 
−
}
 
−
.ele:before, .ele:after {
 
−
  content: '';
 
−
  width: 10px;
 
−
  height: 10px;
 
−
  background: var(--dot-color1);
 
−
  border-radius: 50%;
 
−
  position: absolute;
 
−
  left: 50%;
 
−
  transform: translateX(-50%);
 
−
}
 
−
.ele:before {
 
−
  top: -2px;
 
−
  background: var(--dot-color2);
 
−
}
 
−
.ele:after {
 
−
  bottom: -2px;
 
−
}
 
−
.ele:nth-of-type(1) {
 
−
  animation-delay: -0.15s;
 
−
}
 
−
.ele:nth-of-type(2) {
 
−
  animation-delay: -0.3s;
 
−
}
 
−
.ele:nth-of-type(3) {
 
−
  animation-delay: -0.45s;
 
−
}
 
−
.ele:nth-of-type(4) {
 
−
  animation-delay: -0.6s;
 
−
}
 
−
.ele:nth-of-type(5) {
 
−
  animation-delay: -0.75s;
 
−
}
 
−
.ele:nth-of-type(6) {
 
−
  animation-delay: -0.9s;
 
−
}
 
−
.ele:nth-of-type(7) {
 
−
  animation-delay: -1.05s;
 
−
}
 
−
.ele:nth-of-type(8) {
 
−
  animation-delay: -1.2s;
 
−
}
 
−
.ele:nth-of-type(9) {
 
−
  animation-delay: -1.35s;
 
−
}
 
−
.ele:nth-of-type(10) {
 
−
  animation-delay: -1.5s;
 
−
}
 
−
.ele:nth-of-type(11) {
 
−
  animation-delay: -1.65s;
 
−
}
 
−
.ele:nth-of-type(12) {
 
−
  animation-delay: -1.8s;
 
−
}
 
−
.ele:nth-of-type(13) {
 
−
  animation-delay: -1.95s;
 
−
}
 
−
.ele:nth-of-type(14) {
 
−
  animation-delay: -2.1s;
 
−
}
 
−
.ele:nth-of-type(15) {
 
−
  animation-delay: -2.25s;
 
−
}
 
−
.ele:nth-of-type(16) {
 
−
  animation-delay: -2.4s;
 
−
}
 
−
.ele:nth-of-type(17) {
 
−
  animation-delay: -2.55s;
 
−
}
 
−
.ele:nth-of-type(18) {
 
−
  animation-delay: -2.7s;
 
−
}
 
−
.ele:nth-of-type(19) {
 
−
  animation-delay: -2.85s;
 
−
}
 
−
.ele:nth-of-type(20) {
 
−
  animation-delay: -3s;
 
−
}
 
−
 
−
@keyframes run {
 
−
  to {
 
−
    transform: none;
 
−
  }
 
−
}
 
  
  
Line 457: Line 347:
 
background: rgba(0, 171, 255, 0.6);
 
background: rgba(0, 171, 255, 0.6);
 
}
 
}
 +
 +
 +
/*DNA animation*/
 +
:root {
 +
  --bg-color: radial-gradient(circle at center, #ffffff, #cccccc);
 +
  --dot-color1: deepskyblue;
 +
  --dot-color2: #000;
 +
}
 +
 +
 +
.dna {
 +
 
 +
  position:relative;
 +
  margin:auto;
 +
  width: 360px;
 +
  height: 70px;
 +
  perspective: 400px;
 +
  transform-style: preserve-3d;
 +
}
 +
 +
.ele {
 +
  width: 1px;
 +
  height: 70px;
 +
  float: left;
 +
  margin: 0 8px;
 +
  border-left: 1px #B0B0B0 dashed;
 +
  position: relative;
 +
  transform: rotateX(-360deg);
 +
  animation: run 2s linear infinite;
 +
}
 +
.ele:before, .ele:after {
 +
  content: '';
 +
  width: 10px;
 +
  height: 10px;
 +
  background: var(--dot-color1);
 +
  border-radius: 50%;
 +
  position: absolute;
 +
  left: 50%;
 +
  transform: translateX(-50%);
 +
}
 +
.ele:before {
 +
  top: -2px;
 +
  background: var(--dot-color2);
 +
}
 +
.ele:after {
 +
  bottom: -2px;
 +
}
 +
.ele:nth-of-type(1) {
 +
  animation-delay: -0.15s;
 +
}
 +
.ele:nth-of-type(2) {
 +
  animation-delay: -0.3s;
 +
}
 +
.ele:nth-of-type(3) {
 +
  animation-delay: -0.45s;
 +
}
 +
.ele:nth-of-type(4) {
 +
  animation-delay: -0.6s;
 +
}
 +
.ele:nth-of-type(5) {
 +
  animation-delay: -0.75s;
 +
}
 +
.ele:nth-of-type(6) {
 +
  animation-delay: -0.9s;
 +
}
 +
.ele:nth-of-type(7) {
 +
  animation-delay: -1.05s;
 +
}
 +
.ele:nth-of-type(8) {
 +
  animation-delay: -1.2s;
 +
}
 +
.ele:nth-of-type(9) {
 +
  animation-delay: -1.35s;
 +
}
 +
.ele:nth-of-type(10) {
 +
  animation-delay: -1.5s;
 +
}
 +
.ele:nth-of-type(11) {
 +
  animation-delay: -1.65s;
 +
}
 +
.ele:nth-of-type(12) {
 +
  animation-delay: -1.8s;
 +
}
 +
.ele:nth-of-type(13) {
 +
  animation-delay: -1.95s;
 +
}
 +
.ele:nth-of-type(14) {
 +
  animation-delay: -2.1s;
 +
}
 +
.ele:nth-of-type(15) {
 +
  animation-delay: -2.25s;
 +
}
 +
.ele:nth-of-type(16) {
 +
  animation-delay: -2.4s;
 +
}
 +
.ele:nth-of-type(17) {
 +
  animation-delay: -2.55s;
 +
}
 +
.ele:nth-of-type(18) {
 +
  animation-delay: -2.7s;
 +
}
 +
.ele:nth-of-type(19) {
 +
  animation-delay: -2.85s;
 +
}
 +
.ele:nth-of-type(20) {
 +
  animation-delay: -3s;
 +
}
 +
 +
@keyframes run {
 +
  to {
 +
    transform: none;
 +
  }
 +
}
 +
 +
/*======================================*/
  
  

Revision as of 21:03, 2 August 2017