纯CSS实现漂亮的按钮

时间：2023-03-31 13:45:51 CSS

最近在工作中遇到一个需求——实现一些很酷的按钮。看到效果图后，按键真的很漂亮，弹跳、颜色渐变、扫光、霓虹灯，瞬间勾起了我的胃口。好奇心，开启了研究的实现之路。（欢迎关注公众号前端点线面）1.基本储备这些漂亮按钮的实现主要用到了一些CSS属性，主要有animation,background-size,background-position,linear-gradient(），以下是关于这四个内容的简要概述。1.1animation动画属性用于指定一组或多组动画，每组之间用逗号分隔，其语法如下，详细用法参考MDN：animation:namedurationtiming-functiondelayiteration-countdirection;1.2background-sizebackground-size设置背景图片大小。图像可以保持其原始大小，或者被拉伸到新的大小，或者在保持其原始比例的同时缩放到元素可用空间的大小。语法如下。详细用法请参考MDN:background-size:length|percentage|cover|contain;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;高度：46px；行高：46px；背景：#2e82ff；颜色：#ffffff；字体大小：18px；边界半径：27px；动画：zoomIn1.5s无限；text-align:center;}@keyframeszoomIn{50%{transform:scale(1.2);}100%{转换：比例（1）；}2.2颜色渐变效果其次是颜色渐变效果。所谓颜色渐变效果就是颜色从一种颜色变成另一种颜色，然后这样循环。思路如下：创建一个静态按钮；添加渐变色的对称背景色；将背景色在x轴方向拉伸200%，使原来对称轴处的背景色可以从中间向右移动；最后用动画实现操作位置的动画，模拟颜色不断变化的动画。立即下载

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

.button3{width:200px;高度：46px；行高：46px；背景色：#2e82ff；颜色：#ffffff；字体大小：18px；文本对齐：居中；边界半径：27px；位置：相对；}.button3::before{内容：“”；位置：绝对；左：0px；宽度：100%；高度：100%；背景图像：线性渐变（向右，rgba(255,255,255,0)30%，rgba(255,255,255,0.2)50%，rgba(255,255,255,0)70%）;背景大小：200%；动画：无限擦拭1s；}@keyframes擦拭{0%{background-position:00;}100%{背景位置：100%0；}}2.4霓虹灯效果第四个是霓虹灯效果。所谓的霓虹灯效果，其实更像是一条连续移动的斜线。原理如下：创建一个静态按钮；使用静态按钮前的::before伪元素设置元素的背景颜色为倾斜的霓虹灯效果，效果是通过创建一个20px*20px的正方形背景，然后使用linear-gradient倾斜背景色在135°方向实现小回光霓虹灯，再通过背景的不断重复实现整个效果；使用动画实现Animation，不断变换位置实现霓虹灯效果。立即下载