云锦诚建站，专注安岳网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
安岳网站建设设计

将想法与焦点和您一起共享

一篇带你用纯CSS实现beautiful按钮

一、基础储备

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

工布江达网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联公司自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

1.1 animation

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

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

1.2 background-size

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

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

1.3 background-position

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

在使用这个属性时有一个位置必须特别注意，否则很难理解为什么background-position指定的位置和自己想要的不一样，这个位置就是其百分比的计算公式，通过下面公式就可以理解设定百分比后背景图片成了什么结果了：

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

1.4 linear-gradient

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于 数据类型，是一种特别的 数据类型，其语法如下所示，详细用法可参考MDN： 

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

二、效果实现

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

2.1 弹跳效果

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

创建一个静态的按钮;

然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，到动画100%时按钮又恢复原样.

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     立即下载 
    3.
  
 
 
 
 
    
  
  
  
  
  1. .button1 { 
    2.   
  
  
  
  2.     width: 200px; 
    3.   
  
  
  
  3.     height: 46px; 
    4.   
  
  
  
  4.     line-height: 46px; 
    5.   
  
  
  
  5.     background: #2e82ff; 
    6.   
  
  
  
  6.     color: #ffffff; 
    7.   
  
  
  
  7.     font-size: 18px; 
    8.   
  
  
  
  8.     border-radius: 27px; 
    9.   
  
  
  
  9.     animation: zoomIn 1.5s infinite; 
    10.   
  
  
  
  10.     text-align: center; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. @keyframes zoomIn { 
    13.   
  
  
  
  13.     50% { 
    14.   
  
  
  
  14.      transform: scale(1.2); 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16.     100% { 
    17.   
  
  
  
  17.      transform: scale(1); 
    18.   
  
  
  
  18.     } 
    19.   
  
  
  
  19. } 
    20.

2.2 颜色渐变效果

第二种是颜色渐变效果，所谓颜色渐变效果就是颜色从一种颜色到另一种颜色，然后循环如此，其思想如下：

  1. 创建一个静态按钮;
  2. 添加渐变颜色对称的的背景色;
  3. 背景色x轴方向拉伸至200%，这样就可以让原来对称轴处的背景色由中间到了右侧;
  4. 最后利用animation实现操作位置的动画，模拟出颜色不断渐变的动画。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     立即下载 
    3.
  
 
 
 
 
    
  
  
  
  
  1. .button2 { 
    2.   
  
  
  
  2.     display: inline-block; 
    3.   
  
  
  
  3.     width: 200px; 
    4.   
  
  
  
  4.     height: 46px; 
    5.   
  
  
  
  5.     line-height: 46px; 
    6.   
  
  
  
  6.     color: #ffffff; 
    7.   
  
  
  
  7.     font-size: 18px; 
    8.   
  
  
  
  8.     border-radius: 27px; 
    9.   
  
  
  
  9.     text-align: center; 
    10.   
  
  
  
  10.     background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%); 
    11.   
  
  
  
  11.     background-size: 200%; 
    12.   
  
  
  
  12.     animation: colorGradient 1.5s infinite; 
    13.   
  
  
  
  13. } 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. @keyframes colorGradient { 
    16.   
  
  
  
  16.     0% { 
    17.   
  
  
  
  17.         background-position: 0 0; 
    18.   
  
  
  
  18.     } 
    19.   
  
  
  
  19.     100% { 
    20.   
  
  
  
  20.         background-position: 100% 0; 
    21.   
  
  
  
  21.     } 
    22.   
  
  
  
  22. } 
    23.

2.3 扫光效果

第三种是扫光效果，所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描，其思想如下：

  1. 创建一个静态按钮;
  2. 在静态按钮前利用::before伪元素，设置该元素的背景色为白色微透明的颜色，并将该中心位置通过缩放移动到容器右侧;
  3. 利用animation实现动画，并不断变换位置实现扫光效果。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     立即下载 
    3.
  
 
 
 
 
    
  
  
  
  
  1. .button3 { 
    2.   
  
  
  
  2.     width: 200px; 
    3.   
  
  
  
  3.     height: 46px; 
    4.   
  
  
  
  4.     line-height: 46px; 
    5.   
  
  
  
  5.     background-color: #2e82ff; 
    6.   
  
  
  
  6.     color: #ffffff; 
    7.   
  
  
  
  7.     font-size: 18px; 
    8.   
  
  
  
  8.     text-align: center; 
    9.   
  
  
  
  9.     border-radius: 27px; 
    10.   
  
  
  
  10.     position: relative; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. .button3::before { 
    13.   
  
  
  
  13.     content: ""; 
    14.   
  
  
  
  14.     position: absolute; 
    15.   
  
  
  
  15.     left: 0px; 
    16.   
  
  
  
  16.     width: 100%; 
    17.   
  
  
  
  17.     height: 100%; 
    18.   
  
  
  
  18.     background-image:  
    19.   
  
  
  
  19.         linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%); 
    20.   
  
  
  
  20.     background-size: 200%; 
    21.   
  
  
  
  21.     animation: wipes 1s infinite; 
    22.   
  
  
  
  22. } 
    23.   
  
  
  
  23. @keyframes wipes { 
    24.   
  
  
  
  24.     0% { 
    25.   
  
  
  
  25.         background-position: 0 0; 
    26.   
  
  
  
  26.     } 
    27.   
  
  
  
  27.     100% { 
    28.   
  
  
  
  28.         background-position: 100% 0; 
    29.   
  
  
  
  29.     } 
    30.   
  
  
  
  30. } 
    31.

2.4 霓虹灯效果

第四种是霓虹灯效果，所谓霓虹灯效果其实更像一种斜线在不断移动，其原理如下所示：

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     立即下载 
    3.   
  
  
  
  3.  
    4.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. .button4 { 
    2.   
  
  
  
  2.     width: 200px; 
    3.   
  
  
  
  3.     height: 46px; 
    4.   
  
  
  
  4.     line-height: 46px; 
    5.   
  
  
  
  5.     background: #2e82ff; 
    6.   
  
  
  
  6.     color: #ffffff; 
    7.   
  
  
  
  7.     font-size: 18px; 
    8.   
  
  
  
  8.     border-radius: 27px; 
    9.   
  
  
  
  9.     text-align: center; 
    10.   
  
  
  
  10.     position: relative; 
    11.   
  
  
  
  11.     overflow: hidden; 
    12.   
  
  
  
  12. } 
    13.   
  
  
  
  13. .button4:before { 
    14.   
  
  
  
  14.     content: ""; 
    15.   
  
  
  
  15.     position: absolute; 
    16.   
  
  
  
  16.     left: 0px; 
    17.   
  
  
  
  17.     width: 100%; 
    18.   
  
  
  
  18.     height: 100%; 
    19.   
  
  
  
  19.     background-size: 20px 20px; 
    20.   
  
  
  
  20.     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%); 
    21.   
  
  
  
  21.     animation: moveblock 0.5s linear infinite; 
    22.   
  
  
  
  22. } 
    23.   
  
  
  
  23. @keyframes moveblock{ 
    24.   
  
  
  
  24.     0% { 
    25.   
  
  
  
  25.         background-position: 0px 0px; 
    26.   
  
  
  
  26.     } 
    27.   
  
  
  
  27.     100% { 
    28.   
  
  
  
  28.         background-position: 20px 0px; 
    29.   
  
  
  
  29.     } 
    30.   
  
  
  
  30. } 
    31.

网站标题：一篇带你用纯CSS实现beautiful按钮
网页路径：http://www.scanyue.cn/article/dhciccg.html

其他资讯