为什么做红灯笼的时候，z-index:-1；红色没有？不要z-index有，但是动画效果把子盖住了
XB小白
2016-02-19 15:45
#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;}
}
1回答
-
- 幸宇
- 2016-02-27 14:50:51
灯笼的图片本来就是切的透明的，若是在灯笼内容前加上红色把字会挡到，字写在灯笼里了，虽然切的灯笼是透明的，只有加上z-index=1，就会在灯笼层之下了，这样字就可以看到了
HTML5+CSS3实现春节贺卡
110034 学习 · 450 问题
相似问题