html中小叉叉的图标,CSS3 勾和叉图标的变换动效

CSS

语言：

CSSSCSS

确定

body {

background-color: aqua;

}

#w {

width: 80px;

margin: 50px auto;

}

.icon {

width: 80px;

height: 80px;

background-color: #181818;

border-radius: 50%;

}

.icon.cross span {

background-color: #fff;

border-radius: 5px;

display: inline-block;

margin-top: 23px;

margin-left: 20px;

}

.icon.cross span::before {

content: '';

width: 40px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 10px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(45deg) translateY(3px) translateX(3px);

}

.icon.cross span::after {

content: '';

width: 40px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 20px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(135deg) translateY(3px) translateX(-4px);

}

.icon.vmark span {

background-color: #fff;

border-radius: 5px;

display: inline-block;

margin-top: 25px;

margin-left: 20px;

}

.icon.vmark span::before {

content: '';

width: 20px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 10px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(45deg) translateY(8px) translateX(6px);

}

.icon.vmark span::after {

content: '';

width: 35px;

height: 4px;

background-color: #fff;

border-radius: 5px;

position: absolute;

margin-top: 20px;

transition: All 0.5s cubic-bezier(0.65, 0.1, 0.65, 0);

transform: rotate(-45deg) translateY(2px) translateX(10px);

}