CSS
语言:
CSSSCSS
确定
.navicon-link {
color: #fefefe;
font: 2em/2.5em "Kite One";
font-weight: 400; }
.navicon-button {
padding: 2.0625em 0.25em;
transition: 0.25s;
opacity: 0.9; }
.navicon-button .navicon:after {
transition: 0.25s; }
.navicon {
position: relative;
width: 3.5em;
height: 0.5em;
background: #fefefe;
transition: 0.5s; }
.navicon:after {
display: block;
content: "";
height: 0.5em;
width: 3.5em;
background: #fefefe;
position: absolute;
z-index: -1;
transition: 0.5s 0.25s; }
.navicon:after {
transform: rotate(90deg);
/* Transforming into - */ }
.open .navicon {
background: transparent; }
.open .navicon:after {
transform: rotate(135deg); }
.open {
transform: rotate(45deg);
/* Base ================== */ }
* {
box-sizing: border-box; }
html {
font-size: 100%; }
html, body, section {
position: relative;
height: 100%; }
body {
background: #dcdcdc;
padding: 1.5rem 1.5rem 0;
backface-visibility: hidden; }
nav {
display: flex;
justify-content: space-between;
height: 4.5rem;
background: #333;
text-align: right;
padding: 0 1rem;
user-select: none;
-webkit-tap-highlight-color: transparent; }
h1 {
text-align: center;
font: 2rem/4.5rem "Kite One";
padding: 0 1.5rem;
opacity: 0.5; }
@font-face {
font-family: 'Kite One';
font-style: normal;
font-weight: 400;
src: local('Kite One'), local('KiteOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/kiteone/v1/VNHoD96LpZ9rGZTwjozAOnYhjbSpvc47ee6xR_80Hnw.woff) format('woff'); }