html点击赞变图标,CSS3 三个点的菜单图标点击变成关闭图标

CSS

语言：

CSSSCSS

确定

body {

background: black;

}

.container {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 45px;

height: 45px;

cursor: pointer;

}

.dot {

position: absolute;

bottom: 0;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

width: 9px;

height: 9px;

background: white;

border-radius: 50%;

-webkit-transition: all 0.35s ease;

transition: all 0.35s ease;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

}

.container.hover .dot {

background: transparent;

}

.dot::before,

.dot::after {

display: block;

content: '';

position: absolute;

bottom: 0;

background: white;

width: 9px;

height: 9px;

border-radius: 50%;

-webkit-transition: all 0.35s ease;

transition: all 0.35s ease;

}

.container.hover .dot::before,

.container.hover .dot::after {

height: 45px;

border-radius: 0;

}

.dot::before {

left: -18px;

}

.container.hover .dot::before {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: right bottom;

-ms-transform-origin: right bottom;

transform-origin: right bottom;

border-radius: 9px;

}

.dot::after {

right: -18px;

}

.container.hover .dot::after {

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: left bottom;

-ms-transform-origin: left bottom;

transform-origin: left bottom;

border-radius: 9px;

}