125 lines
2.5 KiB
CSS
125 lines
2.5 KiB
CSS
:root{
|
|
--rotate: -26deg;
|
|
|
|
/* to make it responsive */
|
|
--unit: 1vmin;
|
|
--zoom: 160;
|
|
--workspace-min: 768; /* device screen height = 768px */
|
|
--upx: calc(var(--zoom) * (var(--unit) / var(--workspace-min))); /* upx = units per pixel */
|
|
|
|
/* DNA Helix loop */
|
|
--animation-speed: 1;
|
|
--helix-duration: 0.5s;
|
|
--helix-iteration-factor: 0.05s;
|
|
|
|
/* DNA model */
|
|
--dna-max-height: calc(140 * var(--upx));
|
|
--dna-nitrogenous-base-width: calc(6 * var(--upx));
|
|
--dna-nitrogenous-base-margin: calc(8 * var(--upx));
|
|
--dna-sugar-diameter: calc(15 * var(--upx));
|
|
--dna-sugar-border-size: calc(6 * var(--upx));
|
|
|
|
/* colors */
|
|
--color-background: #151515;
|
|
--color-sugar: #f2f1d5;
|
|
--color-A: #ffba36;
|
|
--color-T: #26f826;
|
|
--color-C: #439AD9;
|
|
--color-G: #E96451;
|
|
}
|
|
|
|
/* rotate the dna container for smart mobile devices */
|
|
@media (orientation: portrait){
|
|
:root{
|
|
--rotate: -58deg;
|
|
}
|
|
}
|
|
|
|
/* to make things look pretty */
|
|
html, body{
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
body{
|
|
background: var(--color-background);
|
|
overflow: auto;
|
|
}
|
|
|
|
html{
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.4) rgba(0,0,0,0);
|
|
}
|
|
|
|
/* align the DNA to middle */
|
|
.wrapper{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) rotate(var(--rotate));
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
/* DNA is a flex container with n-double helix */
|
|
.dna{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
height: var(--dna-max-height);
|
|
}
|
|
|
|
/* helix (nitrogenous base) */
|
|
.dna > div{
|
|
font-size: 0;
|
|
position: relative;
|
|
width: var(--dna-nitrogenous-base-width);
|
|
height: 0;
|
|
background: linear-gradient(0deg, var(--color-G) 50%, var(--color-C) 50%);
|
|
display: inline-block;
|
|
margin: 0 var(--dna-nitrogenous-base-margin);
|
|
animation:
|
|
double-helix
|
|
ease
|
|
calc(var(--helix-duration) / var(--animation-speed))
|
|
calc((var(--i) * var(--helix-iteration-factor)) / var(--animation-speed))
|
|
alternate
|
|
infinite;
|
|
}
|
|
|
|
.dna > div:nth-child(2n){
|
|
background: linear-gradient(0deg, var(--color-A) 50%, var(--color-T) 50%);
|
|
}
|
|
|
|
@keyframes double-helix{
|
|
to{
|
|
height: var(--dna-max-height);
|
|
}
|
|
}
|
|
|
|
/* sugar */
|
|
.dna > div::before,
|
|
.dna > div::after{
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
width: var(--dna-sugar-diameter);
|
|
height: var(--dna-sugar-diameter);
|
|
display: block;
|
|
border-radius: 50%;
|
|
background: var(--color-sugar);
|
|
border: var(--dna-sugar-border-size) solid var(--color-background);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.dna > div::before{
|
|
top: 0;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.dna > div::after{
|
|
bottom: 0;
|
|
transform: translate(-50%, 50%);
|
|
} |