css 鼠标沙漏,CSS3 沙漏动画

CSS

语言：

CSSSCSS

确定

body {

background: #111117;

}

#loader {

animation: loader 5s cubic-bezier(0.8, 0, 0.2, 1) infinite;

height: 40px;

width: 41px;

position: absolute;

top: calc(50% - 20px);

left: calc(50% - 20px);

}

@keyframes loader {

90% {

transform: rotate(0deg);

}

100% {

transform: rotate(180deg);

}

}

#top {

animation: top 5s linear infinite;

border-top: 20px solid #ffc107;

border-right: 20px solid transparent;

border-left: 20px solid transparent;

height: 0px;

width: 1px;

transform-origin: 50% 100%;

}

@keyframes top {

90% {

transform: scale(0);

}

100% {

transform: scale(0);

}

}

#bottom {

animation: bottom 5s linear infinite;

border-right: 20px solid transparent;

border-bottom: 20px solid #ffc107;

border-left: 20px solid transparent;

height: 0px;

width: 1px;

transform: scale(0);

transform-origin: 50% 100%;

}

@keyframes bottom {

10% {

transform: scale(0);

}

90% {

transform: scale(1);

}

100% {

transform: scale(1);

}

}

#line {

animation: line 5s linear infinite;

border-left: 1px dotted #ffc107;

height: 0px;

width: 0px;

position: absolute;

top: 20px;

left: 20px;

}

@keyframes line {

10% {

height: 20px;

}

100% {

height: 20px;

}

}