关于前端:纯CSS实现beautiful按钮

近期工作中遇到一个需要——实现一些酷炫的按钮，看到效果图之后，按钮的确丑陋，有弹跳、色彩突变、扫光、霓虹灯，霎时激发了我的好奇心，开启了钻研实现之路。（欢送关注公众号前端点线面）

一、根底储备

实现这些丑陋的按钮次要利用了一些 CSS 的属性，次要有 animation、background-size、background-position、linear-gradient(), 上面对这四个内容进行简要概述。

1.1 animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔，其语法如下所示，具体用法可参考 MDN：

animation: name duration timing-function delay iteration-count direction;

1.2 background-size

background-size 设置背景图片大小。图片能够保有其原有的尺寸，或者拉伸到新的尺寸，或者在放弃其原有比例的同时缩放到元素的可用空间的尺寸，其语法如下所示，具体用法可参考 MDN：

background-size: length|percentage|cover|contain;

1.3 background-position

background-position 为每一个背景图片设置初始地位。这个地位是绝对于由 background-origin 定义的地位图层的，具体用法可参考 MDN.

在应用这个属性时有一个地位必须特地留神，否则很难了解为什么 background-position 指定的地位和本人想要的不一样，这个地位就是其百分比的计算公式，通过上面公式就能够了解设定百分比后背景图片成了什么后果了：

background-postion:x y;
x：{容器 (container) 的宽度—背景图片的宽度}* x 百分比，超出的局部暗藏。y：{容器 (container) 的高度—背景图片的高度}* y 百分比，超出的局部暗藏。

1.4 linear-gradient

linear-gradient()  函数用于创立一个示意两种或多种色彩线性突变的图片。其后果属于 <gradient> 数据类型，是一种特地的 <image> 数据类型，其语法如下所示，具体用法可参考 MDN)：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

二、成果实现

上面的四种动画成果其实就是充分利用 CSS 属性实现的，让咱们具体来看看都是如何实现的。

2.1 弹跳成果

第一种成果是弹跳成果，所谓弹跳成果就是按钮在大小之间变换，其思维如下：

1. 创立一个动态的按钮；
2. 而后利用 animation 属性，创立动画，当变换到 50% 时，按钮变换到 1.2 倍，到动画 100% 时按钮又复原原样。

<div class="button1">
    <span> 立刻下载 </span>
</div>

.button1 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    animation: zoomIn 1.5s infinite;
    text-align: center;
}
@keyframes zoomIn {
    50% {transform: scale(1.2);
    }
    100% {transform: scale(1);
    }
}

2.2 色彩突变成果

第二种是色彩突变成果，所谓色彩突变成果就是色彩从一种色彩到另一种色彩，而后循环如此，其思维如下：

1. 创立一个动态按钮；
2. 增加突变色彩对称的的背景色；
3. 背景色 x 轴方向拉伸至 200%，这样就能够让原来对称轴处的背景色由两头到了右侧；
4. 最初利用 animation 实现操作地位的动画，模拟出色彩一直突变的动画。

<div class="button2">
    <span> 立刻下载 </span>
</div>

.button2 {
    display: inline-block;
    width: 200px;
    height: 46px;
    line-height: 46px;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    text-align: center;
    background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);
    background-size: 200%;
    animation: colorGradient 1.5s infinite;
}

@keyframes colorGradient {
    0% {background-position: 0 0;}
    100% {background-position: 100% 0;}
}

2.3 扫光成果

第三种是扫光成果，所谓扫光指的就是一个红色通明色彩从一端一直向另一端扫描，其思维如下：

1. 创立一个动态按钮；
2. 在动态按钮前利用::before 伪元素，设置该元素的背景色为红色微通明的色彩，并将该核心地位通过缩放挪动到容器右侧；
3. 利用 animation 实现动画，并一直变换位置实现扫光成果。

<div class="button3">
    <span> 立刻下载 </span>
</div>

.button3 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background-color: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    border-radius: 27px;
    position: relative;
}
.button3::before {
    content: "";
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200%;
    animation: wipes 1s infinite;
}
@keyframes wipes {
    0% {background-position: 0 0;}
    100% {background-position: 100% 0;}
}

2.4 霓虹灯成果

第四种是霓虹灯成果，所谓霓虹灯成果其实更像一种斜线在一直挪动，其原理如下所示：

1. 创立一个动态按钮；
2. 在动态按钮前利用::before 伪元素，设置该元素的背景色为歪斜的霓虹灯成果，该成果实现是通过创立一个 20px * 20px 的正方形背景，而后利用 linear-gradient 将背景色 135°方向突变歪斜，实现小返回的霓虹灯，而后通过背景一直 repeat 实现整个的成果；
3. 利用 animation 实现动画，并一直变换位置实现霓虹灯成果。

<div class="button4">
    <span> 立刻下载 </span>
</div>

.button4 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.button4:before {
    content: "";
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 20px 20px;
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.1) 75%,rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
    animation: moveblock 0.5s linear infinite;
}
@keyframes moveblock{
    0% {background-position: 0px 0px;}
    100% {background-position: 20px 0px;}
}

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 欢送关注公众号前端点线面，《前端百题斩》pdf 版在等你，如果你刚好在面试，能够将简历发我收费帮你批改。