扫光效果浅析之不规则图形

前情回顾

在话题 SVG 文字描边动画,Done! 中,大佬们提出了stripe的一些效果,跟随佬友们的步伐,先后出了几期:

在后续总结贴 【水帖秘笈】加入社区半年,大鹅的小小总结! 中,我发现之前还有一些相关的延伸内容被忽略了,那就是本期内容,因此再水一水。

不规则图形扫光

效果预览

linuxdo-example

提示

与文字与卡片不同的是,我们本次需要是要使用 mask,用相同的图片形成一个遮罩层,把不需要的地方给裁切掉。

实现

<div class="con">
  <img src="https://game.gtimg.cn/images/lol/logo/big.png" class="logo">
</div>
.con {
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    inset: -10%;
    background: linear-gradient(
      45deg,
      transparent 40%,
      rgba(255, 255, 255, 0.6),
      transparent 60%
    );
    animation: sweep 3s infinite;
  }

  .logo {
    width: 300px;
  }
}

@keyframes sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

此时,呈现的效果如下:

bad-example

可以很明显的看到图形之外的白边,因此我们需要将这些不需要的地方给遮盖住,我们只需要用相同的图片做一层 mask 遮罩层即可:

.con {
  // ...
  mask: url(https://game.gtimg.cn/images/lol/logo/big.png);
  // ...
}

到这里就大功告成啦!实现起来还是很简单,主要是思路。

这三个扫光效果的实现,都有一些细微的差别,需要稍加分析一下就好。

跟之前两个差不多时间做的,忘了放出来 :tieba_087:

也可以在 CODEPEN 查看源代码和预览。


OK,这个坑算是填完了。

过年之前还有一个很酷的效果,点赞、认可、回复三连为大鹅加速!

27 Likes

大鹅我来啦!!动态火焰字怎么搞

2 Likes

大鹅老师好!
已三连,过年闲了也正准备学习下SVG!

2 Likes

鹅佬课堂开课了

2 Likes

好,边吃边学。

2 Likes

跟着大鹅学知识

2 Likes

滤镜就可以,下次搞搞~

2 Likes

快学,然后教教我 :tieba_087:

2 Likes

期待,下面几个火焰字,上面一只鹅

2 Likes

鹅佬太牛辣 :tieba_007:

3 Likes

不敢不敢,大鹅老师不要吓我~

2 Likes

造桥佬来啦!

2 Likes

给为伊佬来点乐子下饭罢了 :tieba_087:

1 Like

鹅佬太强啦

2 Likes

我来了我来了

2 Likes

好久不见的造桥佬 :bili_040:

1 Like

干饭干饭

1 Like

现在还不太会整高级滤镜,准备研究研究矩阵

1 Like

太好了,是大鹅老师教课了,我立马点赞回复认可一气呵成 :hugs:

1 Like

知识就是力量

1 Like