css加号图标_CSS3 加减号转换图标

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'); }