CSS
语言:
CSSSCSS
确定
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
background: #111;
height: 100%;
font-family: 'Lato';
}
.anima {
height: 100%;
}
em {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #333;
margin-top: 140px;
font-size: 16px;
}
.box {
position: relative;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -35px 0 0 -25px;
border: 5px solid transparent;
overflow: hidden;
-webkit-animation: show 1s 0.4s forwards, rotate 0.3s 2.4s ease-out forwards, changeHide 0.7s 3s forwards;
animation: show 1s 0.4s forwards, rotate 0.3s 2.4s ease-out forwards, changeHide 0.7s 3s forwards;
}
@-webkit-keyframes show {
100% {
border-color: #fefefe;
}
}
@keyframes show {
100% {
border-color: #fefefe;
}
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(90deg) scale(0.6);
transform: rotate(90deg) scale(0.6);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(90deg) scale(0.6);
transform: rotate(90deg) scale(0.6);
}
}
@-webkit-keyframes changeHide {
0% {
-webkit-transform: rotate(90deg) scale(0.6);
transform: rotate(90deg) scale(0.6);
}
80% {
-webkit-transform: rotate(90deg) scale(0.75);
transform: rotate(90deg) scale(0.75);
}
100% {
-webkit-transform: rotate(180deg) scale(0);
transform: rotate(180deg) scale(0);
}
}
@keyframes changeHide {
0% {
-webkit-transform: rotate(90deg) scale(0.6);
transform: rotate(90deg) scale(0.6);
}
80% {
-webkit-transform: rotate(90deg) scale(0.75);
transform: rotate(90deg) scale(0.75);
}
100% {
-webkit-transform: rotate(180deg) scale(0);
transform: rotate(180deg) scale(0);
}
}
.box:before {
content: '';
width: 80px;
height: 80px;
border: 6px solid #fefefe;
border-radius: 100px;
position: absolute;
top: -20px;
left: -20px;
-webkit-animation: shrink 1s 1.2s forwards, shrinkMore 0.2s 2.4s forwards;
animation: shrink 1s 1.2s forwards, shrinkMore 0.2s 2.4s forwards;
}
@-webkit-keyframes shrink {
0% {
border-width: 0;
}
50%,
70% {
border-width: 32px;
}
100% {
border-width: 26px;
}
}
@keyframes shrink {
0% {
border-width: 0;
}
50%,
70% {
border-width: 32px;
}
100% {
border-width: 26px;
}
}
@-webkit-keyframes shrinkMore {
0% {
border-width: 26px;
}
100% {
border-width: 40px;
}
}
@keyframes shrinkMore {
0% {
border-width: 26px;
}
100% {
border-width: 40px;
}
}
.box:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 0;
height: 0;
background: #fefefe;
border-radius: 100px;
-webkit-animation: grow 1s 1.2s forwards, hide 0.2s 2.4s forwards;
animation: grow 1s 1.2s forwards, hide 0.2s 2.4s forwards;
}
@-webkit-keyframes grow {
30%, 70% {
width: 6px;
height: 6px;
}
100% {
width: 18px;
height: 18px;
}
}
@keyframes grow {
30%, 70% {
width: 6px;
height: 6px;
}
100% {
width: 18px;
height: 18px;
}
}
@-webkit-keyframes hide {
0% {
width: 18px;
height: 18px;
}
100% {
width: 0;
height: 0;
}
}
@keyframes hide {
0% {
width: 18px;
height: 18px;
}
100% {
width: 0;
height: 0;
}
}
.tri {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -18px;
border: 26px solid #fefefe;
border-top-color: transparent;
border-right-width: 18px;
border-left-width: 18px;
border-right-color: transparent;
border-left-color: transparent;
width: 0;
height: 0;
-webkit-transform: rotate(-180deg) scale(0);
-ms-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
-webkit-transform-origin: 50% 39px;
-ms-transform-origin: 50% 39px;
transform-origin: 50% 39px;
-webkit-animation: changeShow 0.5s 3.5s forwards;
animation: changeShow 0.5s 3.5s forwards;
}
@-webkit-keyframes changeShow {
0% {
-webkit-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
/* 50% {transform: rotate(-90deg) scale(1);} */
}
100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
}
@keyframes changeShow {
0% {
-webkit-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
/* 50% {transform: rotate(-90deg) scale(1);} */
}
100% {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
}