CSS
语言:
CSSSCSS
确定
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
background: #28282b;
}
/* Color schemes */
.demo-magneto {
--color-text: #41353d;
--color-background: #fff037;
--color-link: #000;
--color-link-hover: #41353d;
}
.demo-kidnap {
--color-text: #d5c12e;
--color-background: #191a19;
--color-link: #d5c12e;
--color-link-hover: #fff;
}
.demo-redraw {
--color-text: #0c48a4;
--color-background: #7d96df;
--color-link: #0c48a4;
--color-link-hover: #ededed;
}
.demo-swing {
--color-text: #828284;
--color-background: #1f1f21;
--color-link: #828284;
--color-link-hover: #fff;
}
.word--redraw {
font-size: 12vw;
font-family: 'Montserrat', serif;
font-weight: 700;
text-transform: uppercase;
color: #ededed;
line-height: 0.7125;
letter-spacing: -0.02em;
}
.word--redraw span {
display: block;
position: relative;
}
.word--redraw svg {
left: 50%;
position: absolute;
height: 100%;
width: auto;
max-width: 100%;
fill: none;
stroke: var(--color-text);
stroke-width: 4px;
transform: translateX(-50%);
stroke-linecap: round;
stroke-linejoin: round;
}
.word--redraw svg path {
opacity: 0;
}
body {
font-family: 'Nunito', monospace;
color: var(--color-text);
background-color: var(--color-background);
min-height: 100vh;
}
.js body {
opacity: 0;
transition: opacity 0.3s;
}
.js body.demo-kidnap {
transition: background-color 0.3s, opacity 0.3s;
}
.js body.render {
opacity: 1;
margin: 0;
}
/* Page Loader */
.js .loading::before {
content: '';
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-background);
}
.js .loading::after {
content: '';
box-shadow: 20px 0 0, -20px 0 0;
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
pointer-events: none;
border-radius: 50%;
background: var(--color-text);
animation: loaderAnim 1s ease-in-out infinite alternate forwards;
}
@keyframes loaderAnim {
0% {
box-shadow: 20px 0 0 var(--color-text), -20px 0 0 transparent;
background: transparent;
}
50% {
box-shadow: 20px 0 0 transparent, -20px 0 0 transparent;
background: var(--color-text);
}
100% {
box-shadow: 20px 0 0 transparent, -20px 0 0 var(--color-text);
background: transparent;
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
main {
position: relative;
width: 100%;
}
.demo-kidnap main::before {
content: '';
position: fixed;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/noise.gif);
background-size: 300px;
opacity: 0.7;
}
.content {
position: relative;
display: grid;
justify-content: center;
align-content: center;
height: 100vh;
overflow: hidden;
min-height: 650px;
margin: 0 auto;
}
.content--fixed {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: none;
z-index: 100;
align-content: space-between;
pointer-events: none;
padding: 1.5em;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto 4em;
grid-template-areas: "header tagline" "deco tagline" "deco demos";
}
.content--layout {
grid-template-columns: 100%;
padding: 3em 0;
}
.content--fixed a {
pointer-events: auto;
}
.deco {
grid-area: deco;
align-self: end;
justify-self: start;
padding: 0;
transform: rotate(180deg);
}
.demos {
grid-area: demos;
text-align: center;
display: block;
position: relative;
}
.demo {
margin: 0 0.15em;
}
.demo span {
text-transform: lowercase;
font-weight: bold;
pointer-events: none;
}
.demo span::before {
content: '#';
}
a.demo--current {
text-decoration: underline;
pointer-events: none;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: flex;
justify-content: center;
text-align: center;
white-space: nowrap;
margin: 0 1em 0 0;
}
.codrops-icon {
display: inline-block;
margin: 0.15em;
padding: 0.25em;
}
/* Common styles for the words */
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin: 0;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width: 50em) {
.demos {
align-self: end;
justify-self: end;
display: flex;
}
.demo {
display: block;
border: 2px solid;
width: 12px;
height: 12px;
border-radius: 2px;
margin: 0 10px 0 0;
}
a.demo--current {
background: currentColor;
}
.demo span {
position: absolute;
display: none;
right: 100%;
top: -0.35em;
margin: 0 1em 0 0;
}
.demo--current span {
display: block;
}
}
@media screen and (max-width: 50em) {
html,
body {
overflow-x: hidden;
width: 100vw;
height: 100%;
}
.content {
height: auto;
min-height: 0;
}
.content--layout {
overflow: visible;
}
.demo-magneto .content--layout {
padding: 1em 0 0 0;
}
.content--fixed {
display: block;
z-index: 1000;
position: relative;
padding: 0.85em;
}
.codrops-header {
align-items: center;
flex-direction: column;
}
.codrops-header__title {
font-weight: bold;
text-align: center;
padding-bottom: 0.25em;
}
.codrops-header__tagline {
-webkit-writing-mode: horizontal-tb;
writing-mode: horizontal-tb;
text-align: center;
padding: 0 0 1.5em;
font-size: 0.85em;
}
.github {
display: block;
margin: 1em auto;
}
.codrops-links {
margin: 0;
}
.deco {
display: none;
}
.word.word--magneto {
font-size: 3em;
}
.word.word--kidnap {
font-size: 3.5em;
}
.word.word--redraw {
font-size: 5em;
}
.word.word--swing {
font-size: 4.5em;
}
}
.word--magneto {
font-size: 10vw;
font-family: 'Playfair Display', serif;
font-weight: 900;
text-transform: uppercase;
color: #0e0e19;
line-height: 0.8;
margin: 0 0 1em 0;
}
.word--magneto > span {
display: block;
padding: 1em 0 0;
cursor: default;
position: relative;
}
.word--magneto span span {
display: block;
pointer-events: none;
}
.word--magneto svg {
position: absolute;
left: 50%;
margin-left: -1.5vw;
width: 3vw;
bottom: calc(100% - 1em);
}
.word--magneto svg circle {
fill: currentColor;
opacity: 0;
transform-origin: 50% 50%;
}