我试图在徽标上创建闪光效果。虽然我能做到这一点,但微光效果超出了.png的范围,并且可以在页面的背景上看到。有人可以帮忙吗? `
body {
width: 608px;
height: 342px;
padding: 0px;
margin: 0px;
background-image: url(http://www.whitewaterconnect.com/images/backgrounds/TriangularBackground.jpg);
background-repeat: no-repeat;
font-family: jobber;
overflow: hidden;
}
.splash-logo {
width: 30%;
height: auto;
position: absolute;
top: 1px;
left: 1px;
content: url(http://www.whitewaterconnect.com/images/splash-logo.png);
background-repeat: no-repeat;
z-index: -1;
}
.shine {
width: 200px;
height: 200px;
position: absolute;
top: 1px;
left: 1px;
overflow: hidden;
z-index: 10;
}
.shine:before {
content: "";
position: absolute;
top: 100%;
left: 150%;
height: 150%;
width: 100px;
transform: rotate(45deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
animation: 5s myani linear infinite;
}
@keyframes myani {
0% {
top: -150%;
left: -150%;
}
100% {
top: 150%;
left: 150%;
}
}
div.splash-text {
font-family: jobber;
font-size: 42px;
position: absolute;
top: 825px;
left: 655px;
color: #0099CC;
text-align: center;
}

<div class="body">
</div>
<div class="shine">
</div>
<div class="splash-logo">
</div>
&#13;
`
答案 0 :(得分:0)
如果有其他人遇到此问题以供将来参考,我在这里解决此问题。
我基本上创建了一个“凸起”的背景,z-index设置为10.我用一个透明区域重新创建了我的背景,标志应该在那里。有效地,创建一个适合我的徽标的面具。所以,底层是徽标,然后是闪光效果,然后是背景。