本文带你用纯CSS实现漂亮按钮

时间：2023-03-20 16:57:05 科技观察

1.基本储备这些漂亮按钮的实现主要用到了一些CSS属性，主要有animation，background-size，background-position，linear-gradient()，作为下面对这四项内容进行简要概述。1.1animation动画属性用于指定一组或多组动画。每个组由逗号分隔。语法如下。详细用法参考MDN：animation:namedurationtiming-functiondelayiteration-countdirection;1.2background-sizebackground-size设置背景图片大小。图像可以保持其原始大小，或者被拉伸到新的大小，或者在保持其原始比例的同时缩放到元素可用空间的大小。语法如下。详细用法请参考MDN：animation:namedurationtiming-functiondelayiteration-countdirection;1.3background-positionbackground-position设置每个背景图片的初始位置。这个位置是相对于background-origin定义的位置层。详细使用请参考MDN。在使用这个属性的时候有一个位置必须要特别注意，否则很难理解为什么background-position指定的位置和你想要的不一样，这个位置就是它的百分比的计算公式，你可以通过以下公式了解设置百分比后的背景图片结果：background-position:xy;x:{容器(container)的宽度-背景图片的宽度}*x百分比，超出部分隐藏。y:{容器（容器）高度-背景图片高度}*y百分比，超出部分隐藏。1.4linear-gradientlinear-gradient()函数用于创建表示两种或多种颜色线性渐变的图像。结果属于数据类型，是一种特殊的数据类型。它的语法如下。详细用法参考MDN：background-image:linear-gradient(direction,color-stop1,color-stop2,...);,效果实现下面四种动画效果其实都是充分利用CSS属性实现的。让我们看看如何详细实现它们。2.1弹跳效果第一个效果是弹跳效果。所谓弹跳效果就是按钮在大小之间变化。思路如下：创建一个静态按钮；然后使用动画属性创建动画。当它变为50%时，按钮变为1.2倍，当动画为100%时，按钮恢复到原来的状态。立即下载

.button1{width:200px;height:46px;line-height:46px;背景：#2e82ff；颜色：#ffffff；字体大小：18px；边框半径：27px；动画：zoomIn1.5sinfinite；text-align：center；}@keyframeszoomIn{50%{transform:scale(1.2);}100%{transform:scale(1);}}2.2颜色渐变效果其次是颜色渐变效果。所谓颜色渐变效果就是颜色从一种颜色变成另一种颜色，然后这样循环。思路如下：创建一个静态按钮；添加具有渐变色的对称背景色；将背景色在x轴方向拉伸200%，使原对称轴处的背景色从中间向右移动；最后用animation实现操作位置的动画，模拟颜色渐变的Animation。立即下载

.button2{display:inline-block;width:200px;height:46px;line-height:46px;color:#ffffff;font-大小：18px；边框半径：27px；文本对齐：中心；背景图像：线性渐变（toright，#ff33000%，#eb440225%，#ffc40450%，#eb440275%，#ff3300100%）；背景大小:200%;animation:colorGradient1.5sinfinite;}@keyframescolorGradient{0%{background-position:00;}100%{background-position:100%0;}}2.3扫掠效果第三个是扫掠效果，所以-所谓扫掠，是指一种白色透明的颜色，从一端连续扫描到另一端。思路如下：创建一个静态按钮；在静态按钮前使用::before伪元素，将元素的背景色设置为白色略透明的颜色，并通过缩放将中心位置移至容器右侧；用animation实现动画，不断变换位置，达到扫一扫的效果。立即下载

.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%;背景图像：线性渐变（右，rgba（255,255,255,0）30％，rgba（255,255,255,0.2）50％，rgba（255,255,255,0）70％）;背景大小：200％;动画：wipes1sinfinite;}@keyframeswipes{0%{background-position:00;}100%{background-position:100%0;}}2.4霓虹灯效果第四种是霓虹灯效果。所谓的霓虹灯效果其实更像是一个连续移动的斜线，原理如下：创建一个静态按钮；在静态按钮之前使用::before伪元素将元素的背景颜色设置为倾斜的霓虹灯效果。这个效果是通过创建一个20px*20px的正方形背景来实现的，然后使用linear-gradient将背景颜色倾斜135°实现小回光霓虹灯，然后重复背景来实现整个效果；用animation实现动画，不断变换位置实现霓虹灯效果。立即下载