为什么做红灯笼的时候，z-index:-1；红色没有？不要z-index有，但是动画效果把子盖住了

#page1>.p1_lantern:before{

position: absolute;

top: 0;

right: 0;

bottom: 0;

margin: auto;

left: 0;

z-index: -1;

content:"";

width: 25vw;

height: 18vh;

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;}

}

@keyframes p1_lantern{

0%{

opacity: .5;

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

       transform:scale(.8,.8);

}

100%{ opacity: 1;}

}