1
我試圖在徽標上創建閃爍效果。雖然我可以做到這一點，但閃爍效果超出了.png的界限，並且可以在頁面的背景上看到。任何人都可以協助`將css動畫僅包含在圖像中而不包含在頁面的全部內容中
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>`