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