CSS
语言:
CSSSCSS
确定
.check-save {
background: rgba(0, 0, 0, 0.8);
margin-left: calc(50% - 25px);
border-radius: 150px;
height: 150px;
width: 150px;
position: absolute;
box-sizing: border-box;
cursor: pointer;
}
.check-save::before,
.check-save::after {
box-sizing: border-box;
position: absolute;
height: 0;
width: 5px;
background-color: #fff;
display: inline-block;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
content: ' ';
-webkit-transition: opacity ease 0.5;
-moz-transition: opacity ease 0.5;
transition: opacity ease 0.5;
}
.check-save::before {
top: 108px;
left: 61.5px;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.check-save::after {
top: 49.5px;
left: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.check-save::before {
-moz-animation: reverseTop 0.1s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-o-animation: reverseTop 0.1s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-webkit-animation: reverseTop 0.1s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
animation: reverseTop 0.1s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
}
.check-save::after {
-moz-animation: reverseBottom 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-o-animation: reverseBottom 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-webkit-animation: reverseBottom 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
animation: reverseBottom 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
}
.check-save:hover::after {
-moz-animation: bottomcheck 0.2s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-o-animation: bottomcheck 0.2s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-webkit-animation: bottomcheck 0.2s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
animation: bottomcheck 0.2s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
}
.check-save:hover::before {
-moz-animation: topcheck 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-o-animation: topcheck 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
-webkit-animation: topcheck 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
animation: topcheck 0.4s cubic-bezier(0.35, 0, 0.25, 1) 0s forwards;
}
@-moz-keyframes bottomcheck {
0% {
height: 0;
}
100% {
height: 85.71429px;
}
}
@-webkit-keyframes bottomcheck {
0% {
height: 0;
}
100% {
height: 85.71429px;
}
}
@keyframes bottomcheck {
0% {
height: 0;
}
100% {
height: 85.71429px;
}
}
@-moz-keyframes reverseBottom {
0% {
height: 85.71429px;
}
100% {
height: 0;
}
}
@-webkit-keyframes reverseBottom {
0% {
height: 85.71429px;
}
100% {
height: 0;
}
}
@keyframes reverseBottom {
0% {
height: 85.71429px;
}
100% {
height: 0;
}
}
@keyframes topcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 150px;
}
}
@-webkit-keyframes topcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 150px;
}
}
@-moz-keyframes topcheck {
0% {
height: 0;
}
50% {
height: 0;
}
100% {
height: 150px;
}
}
@keyframes reverseTop {
0% {
height: 150px;
}
50% {
height: 0;
}
100% {
height: 0;
}
}
@-webkit-keyframes reverseTop {
0% {
height: 150px;
}
50% {
height: 0;
}
100% {
height: 0;
}
}
@-moz-keyframes reverseTop {
0% {
height: 150px;
}
50% {
height: 0;
}
100% {
height: 0;
}
}