css 关闭按钮实现,CSS做的关闭按钮动效

CSS

语言：

CSSSCSS

确定

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

background: #141926;

font-family: Helvetica, Arial, sans-serif;

}

.outer {

position: relative;

margin: auto;

width: 70px;

margin-top: 200px;

cursor: pointer;

}

.inner {

width: inherit;

text-align: center;

}

label {

font-size: .8em;

line-height: 4em;

text-transform: uppercase;

color: #fff;

transition: all .3s ease-in;

opacity: 0;

}

.inner:before,

.inner:after {

position: absolute;

content: '';

height: 1px;

width: inherit;

background: #FFC107;

left: 0;

transition: all .3s ease-in;

}

.inner:before {

top: 50%;

transform: rotate(45deg);

}

.inner:after {

bottom: 50%;

transform: rotate(-45deg);

}

.outer:hover label {

opacity: 1;

}

.outer:hover .inner:before,

.outer:hover .inner:after {

transform: rotate(0);

}

.outer:hover .inner:before {

top: 0;

}

.outer:hover .inner:after {

bottom: 0;

}