CSS
语言:
CSSSCSS
确定
body {
background: white;
padding: 2rem;
font-family: Helvetica, sans-serif; }
div {
text-align: center; }
a {
text-decoration: none; }
h1 {
color: #1ebcc5;
text-align: center;
margin: 0 0 50px 0; }
ul {
list-style: none;
margin: 0;
padding: 0; }
.header ul {
margin-top: 20px; }
.variations {
width: 440px;
display: inline-block;
margin: 20px 0 0; }
.variations li {
width: 70px;
margin: 15px 20px;
display: inline-block;
vertical-align: top; }
.variations li ul li {
margin: 0;
text-align: left;
display: block; }
.close {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
overflow: hidden; }
.close:hover::before, .close:hover::after {
background: #1ebcc5; }
.close::before, .close::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #000; }
.close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.close.big {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3); }
.close.hairline::before, .close.hairline::after {
height: 1px; }
.close.thick::before, .close.thick::after {
height: 4px;
margin-top: -2px; }
.close.black::before, .close.black::after {
height: 8px;
margin-top: -4px; }
.close.heavy::before, .close.heavy::after {
height: 12px;
margin-top: -6px; }
.close.pointy::Before, .close.pointy::after {
width: 200%;
left: -50%; }
.close.rounded::before, .close.rounded::after {
border-radius: 5px; }
.close.blades::before, .close.blades::after {
border-radius: 5px 0; }
.close.warp::before, .close.warp::after {
border-radius: 120% 0; }
.close.fat::before, .close.fat::after {
border-radius: 100%; }
small {
display: block;
padding: 5rem;
font: 0.8rem/1 sans-serif;
color: #777;
text-align: center; }
small a {
color: #1ebcc5;
text-decoration: none;
border-bottom: 1px solid #ccc; }
small a:hover {
border-bottom-color: #222; }