带闪亮动画的按钮 - 分步指南

超文本标记语言

对于 HTML，我们只有一个按钮元素。

<button>Button</button>

CSS

对于 CSS，首先我们要设置按钮的样式。

我们将删除边框并将其四舍五入 1 像素。

然后我们将背景设置为绿色，添加一些填充，隐藏溢出的所有内容并将位置设置为相对。

button {
    border: none;
    border-radius: 1px;
    padding: 5px 20px;
    background: #00ffb3;
    position: relative;
    overflow: hidden;
}

现在我们将设置 before 伪元素的样式。该元素将产生光泽效果。

我们将内容和位置设置为绝对高度、100 像素宽度。

背景将是线性渐变，旋转 120 度，两个透明之间有白色。

我们将 top 设置为 0，将 left 设置为 -100 像素（元素的宽度）。

button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
}

现在我们将创建动画。

我们只需将 left 属性设置为 -100 像素（在动画的 0% 处）和 100%（在动画的 20% 处）。

另外，我们将动画设置为 100% 到 100%，这样元素就不会移回其原始位置。

@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}

现在我们将动画添加到伪元素之前，持续时间为 3 秒，无限，线性。

button:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 3s infinite linear; /* Animation */
}

就是这样。