Question

.zuphologo {
	padding-top: 33%;
	padding-bottom: 2%;
}

.fx {
    box-shadow: 0px 0px 100px 4px #fff;
  animation: glow 1.5s linear infinite alternate;

}

@keyframes glow{
  to {
    box-shadow: 0px 0px 30px 20px #fff;
  }
}

  <div class="container">
    <div class="row">
      <div class="col text-center zuphologo">
        <a href="google.co.uk">
          <img src="assets/img/logo.png" width="150" class="fx glowing purple">
        </a><br>
        <img src="assets/img/logoMyZupho.png" width="250" class="myzuphologo"><br>
        <p class="mylove">my love / mon amour / il mio amore / mi amore</p>
      </div>
    </div>
  </div>

我有一些动画效果，已经在这里的徽标背后了：

http://zupho.bootstrap.gridhosted.co.uk/

但是正如你所看到的，悬停效果呈方形 - 而不是环绕五边形标志 - 我该怎么把它包起来呢？

Answer 1

我使用带有filter: blur()和属性fill的阴影SVG六边形进行着色。

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: black;
}

div {
  position: relative;
}

img,
svg {
  position: absolute;
  transform: translate(-50%, -50%);
}

svg {
  width: 168px;
  height: 196px;
  transform: translate(-50%, -50%) rotate(30deg);
  animation: glow 1.5s linear infinite alternate;
  filter: blur(0px);
  z-index: -10;
  fill: #aaa;
  transition: .2s;
}

@keyframes glow {
  from,
  to {
    filter: blur(0px);
  }
  50% {
    filter: blur(80px);
  }
}

img:hover+svg {
  fill: rgba(244, 66, 232, 1);
}


}

<div>
  <img src="http://zupho.bootstrap.gridhosted.co.uk/assets/img/logo.png">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 2l6 10.5-6 10.5h-12l-6-10.5 6-10.5z"/></svg>
</div>

png图像周围的CSS动画发光效果

1 个答案: