为什么 p2_circle_middle没有转，而且都没显示出来？？

/* all tag */

*{

margin: 0;

padding: 0;

border: none;

font-size: 1.5625vw;

font-family: "Microsoft Yahei";

}

/* music */

#music{

position: fixed;

top: 3vh;

right: 4vw;

z-index: 5;

width: 15vw;

height: 15vw;

margin: auto;

border: 4px solid #ef1639;

border-radius: 50%;

background: #fff;

}

#music > img:first-of-type {

position: absolute;

top: 24%;

right: 2.5%

width:28.421%;

margin: auto;

}

#music > img:last-of-type {

position: absolute;

z-index: -1;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

#music > img.play {

-webkit-animation: music_disc 4s linear infinite;

animation: music_disc 4s linear infinite; 

}

@-webkit-keyframes music_disc {

0% {

-webkit-animation: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-animation: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes music_disc {

0% {

-webkit-animation: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-animation: rotate(360deg);

transform: rotate(360deg);

}

}

/* page bg*/

.page {

position: absolute;

width: 100%;

height: 100%;

}

.page > .bg {

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

}

/* page1 */

#page1 {

display: none;

}

#page1 > .bg {

background: url("H:/小小移动端/image/p1_bg.jpg") no-repeat center center;

background-size: 100%;

}

#page1 > .p1_lantern {

position: absolute;

top: -10%;

right: 0;

left: 0;

margin: auto;

background: url("H:/小小移动端/image/p1_lantern.png") no-repeat center bottom;

width: 45vw;

height: 71.2vh;

font-size: 3.506rem;

padding-top: 31vh;

text-align: center;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

}

#page1 > .p1_lantern:before {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: -1;

content: "";

margin: auto;

width: 30vw;

height: 30vw;

background: #d60b3b;

opacity:  .5;

border-radius: 50%;

-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;

-moz-box-shadow: 0 0 10vw 10vw #d60b3b;

-ms-box-shadow: 0 0 10vw 10vw #d60b3b;

-o-box-shadow: 0 0 10vw 10vw #d60b3b;

box-shadow: 0 0 10vw 10vw #d60b3b;

-webkit-animation: p1_lantern .5s infinite alternate;

animation: p1_lantern .5s infinite alternate;

}

@-webkit-keyframes p1_lantern {

0% { opacity: .5;

-webkit-transform: scale(.8,.8);

transform: scale(.8,.8);

}

100% { opacity: 1;}

}

#page1 > .p1_gj {

position: absolute;

right: 0;

bottom: 9vh;

left: 0;

background: url("H:/小小移动端/image/p1_gj.png") no-repeat center center;

background-size: 100px;

width: 27.656vw;

height: 23vh;

margin: auto;

}

#page1 > .p1_words {

font-size: 2.4rem;

position: absolute;

right: 0;

bottom: 48px;

left: 0;

text-align: center;

color: black;

}

/* page2 */

#page2 {

display: block;

}

#page2 > .bg {

background: url("H:/小小移动端/image/p2_bg.jpg") no-repeat center center;

background-size: 100%;

}

#page2 > .p2_circle {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

border-radius: 50%;

background: url("../image/p2_circle_outer.png") no-repeat center center;

background-size: 100%;

width: 59.375vw;

height: 59.375vw;

-webkit-animation: p2_circle_outer 1s linear 3s infinite;

animation: p2_circle_outer 1s linear 3s infinite;

}

@-webkit-keyframes p2_circle_outer {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

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

transform: rotate(-360deg);

}

}

@keyframes p2_circle_outer {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

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

transform: rotate(-360deg);

}

}

}

#page2 > .p2_circle:before {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

border-radius: 50%;

content: "";

background: url("../image/p2_circle_middle.png") no-repeat center center;

background-size: 100%;

width: 45.625vw;

height: 45.625vw;

-webkit-animation: p2_circle_middle 1s linear 2s infinite;

animation: p2_circle_middle 1s linear 2s infinite;

}

@-webkit-keyframes p2_circle_middle {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(720deg);

transform: rotate(720deg);

}

}

@keyframes p2_circle_middle {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(720deg);

transform: rotate(720deg);

}

}

#page2 > .p2_circle:after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

border-radius: 50%;

content: "";

background: url("../image/p2_circle_inner.png") no-repeat center center;

background-size: 100%;

width: 39.937vw;

height: 39.937vw;

-webkit-animation: p2_circle_inner 1s linear 1s infinite;

animation: p2_circle_inner 1s linear 1s infinite;

}

@-webkit-keyframes p2_circle_inner {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

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

transform: rotate(-1080deg);

}

}

@keyframes p2_circle_inner {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

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

transform: rotate(-1080deg);

}

}

#page2 > .p2_2017 {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

background: url("../image/p2_2017") no-repeat center center;

background-size: 100%;

width: 30vw;

height: 8vh;

}

/* page3 */

#page3 {

display: none;

}

#page3 > .bg {

background: url("../image/p3_bg.jpg") no-repeat center center;

background-size: 100%;

}

#page3 > .p3_dt{

width: 52vw;

height: 54vh;

position: absolute;

top: 2vh;

right: 0;

left: 0;

margin: auto;

background: url("../image/p3_dt.png") no-repeat center center;

background-size: 100%;

}

#page3 > .p3_second{

width: 22.8125vw;

height: 41.652vh;

position: absolute;

top: 25.48vh;

left: 3.75vw;

background: url("../image/p3_couplet_second.png") no-repeat center center;

background-size: 100%;

}

#page3 > .p3_first{

width: 22.8125vw;

height: 41.652vh;

position: absolute;

top: 25.48vh;

right: 3.75vw;

background: url("../image/p3_couplet_first.png") no-repeat center center;

background-size: 100%;

}

#page3 > .p3_blessing {

width: 32vw;

height: 32vw;

position: absolute;

right: 0;

bottom: 10vh;

left: 0;

margin: auto;

border-radius: 50%;

background: url("../image/p3_blessing.png") no-repeat center center;

background-size: 100%;

-webkit-animation: p3_blessing 2s linear  infinite;

animation: p3_blessing 2s linear  infinite;

}

@-webkit-keyframes p3_blessing {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

}