一篇带你用纯CSS实现beautiful按钮
发布时间：2025-11-05 15:49:00 作者：玩站小弟 
我要评论
我要评论一、基础储备实现这些漂亮的按钮主要利用了一些CSS的属性，主要有animation、background-size、background-position、linear-gradient(),下面对这
。
一、篇带基础储备
实现这些漂亮的用纯按钮主要利用了一些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：
animation: name duration timing-function delay iteration-count direction;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() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型，其语法如下所示，详细用法可参考MDN：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);二、效果实现
下面的四种动画效果其实就是充分利用CSS属性实现的，让我们具体来看看都是如何实现的。
2.1 弹跳效果
第一种效果是弹跳效果，所谓弹跳效果就是按钮在大小之间变换，其思想如下：
创建一个静态的按钮;
然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，企商汇到动画100%时按钮又恢复原样.
2.2 颜色渐变效果
第二种是颜色渐变效果，所谓颜色渐变效果就是颜色从一种颜色到另一种颜色，然后循环如此，其思想如下：
创建一个静态按钮; 添加渐变颜色对称的的背景色; 背景色x轴方向拉伸至200%，这样就可以让原来对称轴处的背景色由中间到了右侧; 最后利用animation实现操作位置的动画，模拟出颜色不断渐变的动画。
2.3 扫光效果
第三种是扫光效果，所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描，其思想如下：
创建一个静态按钮; 在静态按钮前利用::before伪元素，设置该元素的背景色为白色微透明的颜色，并将该中心位置通过缩放移动到容器右侧; 利用animation实现动画，并不断变换位置实现扫光效果。
2.4 霓虹灯效果
第四种是霓虹灯效果，所谓霓虹灯效果其实更像一种斜线在不断移动，其原理如下所示：
创建一个静态按钮; 在静态按钮前利用::before伪元素，设置该元素的背景色为倾斜的霓虹灯效果，该效果实现是通过创建一个20px * 20px的服务器租用正方形背景，然后利用linear-gradient将背景色135°方向渐变倾斜，实现小返回的霓虹灯，然后通过背景不断repeat实现整个的效果; 利用animation实现动画，并不断变换位置实现霓虹灯效果。
相关文章
- 摘要：自信是每个人实现成功的重要素质之一。而以威高气吹，作为一种秘密武器，可以帮助我们在人生的舞台上散发出自信的光芒。本文将详细介绍以威高气吹的优点和技巧，帮助读者打造自信魅力，实现更多...2025-11-05
windows 7 SP1补丁32/64位 2015年1月汇总篇（内附下载）
Windows 7SP1补丁包(Windows 7补丁汇总)更新到本月最新。包含Windows 7SP1中文版所有重要补丁，可离线安装，适用于Windows 7SP1 32位简体中文系统。包含Inte2025-11-05
扫雷游戏是Windows自带的一款经典游戏，许多Windows 7用户都会在闲暇之余玩一会扫雷，重温当年的经典。Windows 7扫雷游戏比起之前的更为不同，它可以自由更换外观，即使是这一小点的改变，2025-11-05
一、在Windows下经常出现蓝屏故障出现此类故障的表现方式多样，有时在Windows启动时出现，有时在Windows下运行一些软件时出现，出现此类故障一般是由于用户操作不当促使Windows系统损坏2025-11-05打造个性化电脑键盘套件的完全教程（自定义键帽，个性化打造属于你的电脑键盘）
摘要：电脑键盘是我们日常办公和娱乐的利器，而一个个性化的电脑键盘套件可以为我们的键盘增添一份独特的魅力。本文将为大家详细介绍如何制作个性化的电脑键盘套件，让你的键盘与众不同。1....2025-11-05
windows 7系统中隐掉办Office文档里的Ctrl选项按钮
工作中经常要处理办公文档，复制粘贴要算是使用频率最多的。但是这个“粘贴选项按钮”有时逗留的太久，有时候经常会妨碍到下一步的操作。如下图所示，单元格B3完全被覆盖了，过犹不及啊...那么，假如不需要要进2025-11-05
最新评论