139 lines
2.2 KiB
CSS
139 lines
2.2 KiB
CSS
/* test style */
|
|
@media screen and (max-width: 27em) {
|
|
p {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
.text {
|
|
fill: none;
|
|
stroke-width: 6;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 70 330;
|
|
stroke-dashoffset: 0;
|
|
-webkit-animation: stroke 6s infinite linear;
|
|
animation: stroke 6s infinite linear;
|
|
}
|
|
|
|
.text:nth-child(5n + 1) {
|
|
stroke: #F2385A;
|
|
-webkit-animation-delay: -1.2s;
|
|
animation-delay: -1.2s;
|
|
}
|
|
|
|
.text:nth-child(5n + 2) {
|
|
stroke: #F5A503;
|
|
-webkit-animation-delay: -2.4s;
|
|
animation-delay: -2.4s;
|
|
}
|
|
|
|
.text:nth-child(5n + 3) {
|
|
stroke: #E9F1DF;
|
|
-webkit-animation-delay: -3.6s;
|
|
animation-delay: -3.6s;
|
|
}
|
|
|
|
.text:nth-child(5n + 4) {
|
|
stroke: #56D9CD;
|
|
-webkit-animation-delay: -4.8s;
|
|
animation-delay: -4.8s;
|
|
}
|
|
|
|
.text:nth-child(5n + 5) {
|
|
stroke: #3AA1BF;
|
|
-webkit-animation-delay: -6s;
|
|
animation-delay: -6s;
|
|
}
|
|
|
|
@-webkit-keyframes stroke {
|
|
100% {
|
|
stroke-dashoffset: -400;
|
|
}
|
|
}
|
|
|
|
@keyframes stroke {
|
|
100% {
|
|
stroke-dashoffset: -400;
|
|
}
|
|
}
|
|
|
|
/* mbti style */
|
|
.text--transparent {
|
|
fill: transparent;
|
|
}
|
|
|
|
.anim-shape {
|
|
-webkit-transform-origin: 0x 150px;
|
|
transform-origin: 0x 150px;
|
|
-webkit-transform: scale(0, 1) translate(0, 0);
|
|
transform: scale(0, 1) translate(0, 0);
|
|
-webkit-animation: moving-panel 3s infinite alternate;
|
|
animation: moving-panel 3s infinite alternate;
|
|
}
|
|
|
|
.colortext .anim-shape:nth-child(1) {
|
|
fill: #0E1826;
|
|
}
|
|
|
|
.colortext .anim-shape:nth-child(2) {
|
|
fill: #166973;
|
|
}
|
|
|
|
.colortext .anim-shape:nth-child(3) {
|
|
fill: #65BFA6;
|
|
}
|
|
|
|
.colortext .anim-shape:nth-child(4) {
|
|
fill: #F2CD5C;
|
|
}
|
|
|
|
.colortext .anim-shape:nth-child(5) {
|
|
fill: #F26444;
|
|
}
|
|
|
|
.shadow {
|
|
-webkit-transform: translate(10px, 10px);
|
|
transform: translate(10px, 10px);
|
|
}
|
|
|
|
.anim-shape--shadow {
|
|
fill: #000;
|
|
fill-opacity: .2;
|
|
}
|
|
|
|
@-webkit-keyframes moving-panel {
|
|
100% {
|
|
-webkit-transform: scale(1, 1) translate(20px, 0);
|
|
transform: scale(1, 1) translate(20px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes moving-panel {
|
|
100% {
|
|
-webkit-transform: scale(1, 1) translate(20px, 0);
|
|
transform: scale(1, 1) translate(20px, 0);
|
|
}
|
|
}
|
|
|
|
|
|
div.content {
|
|
font: 800 14em/1 'Open Sans', Impact;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
.page-header {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
text-transform: uppercase;
|
|
} |