Question

我试图在徽标上创建闪光效果。虽然我能做到这一点，但微光效果超出了.png的范围，并且可以在页面的背景上看到。有人可以帮忙吗？ `

＆＃13;

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

＆＃13;

<div class="body">
</div>

<div class="shine">
</div>

<div class="splash-logo">
</div>

＆＃13;

`

Answer 1

如果有其他人遇到此问题以供将来参考，我在这里解决此问题。

我基本上创建了一个“凸起”的背景，z-index设置为10.我用一个透明区域重新创建了我的背景，标志应该在那里。有效地，创建一个适合我的徽标的面具。所以，底层是徽标，然后是闪光效果，然后是背景。

仅包含图像的css动画，而不包含页面的整个内容

1 个答案: