【无标题】CSS实现漂亮按钮

一.弹跳效果

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);
       }
   }

二：颜色渐变效果

        

1. 创建一个静态按钮；

2. 添加渐变颜色对称的的背景色；

3. 背景色x轴方向拉伸至200%，这样就可以让原来对称轴处的背景色由中间到了右侧；

三：扫光效果

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;
    }
}

 

四： 霓虹灯效果

 

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;
    }
}