为什么 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);
}
}
}
