扫光效果浅析之卡片

开发调优
, ,
1

从超级无敌水帖计划（随缘更新）继续讨论：

本打算周末把 Stripe Done 的动画玩一玩的，发现在动画之前，还有一个扫光动画，且与计划中的另一个有重合，所以就先把这个效果先试了一下

效果

done

要点

使用伪元素来绘制需要的光效，改变背景的偏移量或是背景位置来实现动画效果

代码

内容简单，就直接贴代码了，一看便知

<div class="container">
  <span>订阅</span>
</div>

因文本需要不受光效影响，所以单独包裹并提升层级

body {
  height: 100vh;
  display: grid;
  place-content: center;
}

.container {
  width: 400px;
  height: 60px;
  background: rgb(16, 163, 117);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  cursor: pointer;
  user-select: none;

  span {
    color: #fff;
    letter-spacing: 1px;
    font-size: 20px;
    z-index: 1;
  }

  &::after {
    content: "";
    width: 150%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgb(58, 188, 140) 50%,
      transparent 100%
    );
    animation: saoguang 3s ease infinite;
  }
}

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

  100% {
    transform: translateX(100%);
  }
}

其实原理与五彩背景动画相似，以前 @mack 的小尾巴那种，大差不差。

你也可以直接在 CODEPEN 预览

一不小心又水一篇，美滋滋 :bili_057:

姊妹篇：

9 Likes
2

好好，学习一下 :bili_117:

2 Likes
3

感谢分享，学到了

2 Likes
4

眼睛看会了 请问脑子去哪里领

2 Likes
5

我来啦我来啦，大鹅依然牛逼

2 Likes
6

CV大法，天下无敌！

1 Like
7

大鹅看没看我最新的一期视频分享贴啊

2 Likes
8

这不是在研究这玩意么，还没看呢 :tieba_087:

1 Like
9

那有时间一定要过去看看哦 :bili_040:

2 Likes
10

已经CV到自己的网站里了 :bili_117:，很好看哈哈哈哈

2 Likes
11

好快的行动 :smile:

1 Like
12

鸭鸭好高产啊！

2 Likes
13

好好，学习一下 :bili_117:

2 Likes
14

强强强！。。

2 Likes
15

虽然你帅，但也不能改变物种 :tieba_086:

1 Like
16

周末也学习一下 :melting_face:

2 Likes
18

突然就想你了 :tieba_086:

1 Like
20

新建文件夹了，会有的 :smile:

1 Like