html关闭小图标css,纯CSS3实现的关闭图标

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