前情回顾
在话题 SVG 文字描边动画,Done! 中,大佬们提出了stripe的一些效果,跟随佬友们的步伐,先后出了几期:
在后续总结贴 【水帖秘笈】加入社区半年,大鹅的小小总结! 中,我发现之前还有一些相关的延伸内容被忽略了,那就是本期内容,因此再水一水。
不规则图形扫光
效果预览
提示
与文字与卡片不同的是,我们本次需要是要使用 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%);
}
}
此时,呈现的效果如下:
可以很明显的看到图形之外的白边,因此我们需要将这些不需要的地方给遮盖住,我们只需要用相同的图片做一层 mask
遮罩层即可:
.con {
// ...
mask: url(https://game.gtimg.cn/images/lol/logo/big.png);
// ...
}
到这里就大功告成啦!实现起来还是很简单,主要是思路。
这三个扫光效果的实现,都有一些细微的差别,需要稍加分析一下就好。
跟之前两个差不多时间做的,忘了放出来
也可以在 CODEPEN 查看源代码和预览。
OK,这个坑算是填完了。
过年之前还有一个很酷的效果,点赞、认可、回复三连为大鹅加速!