文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

纯 CSS 实现 Beautiful 按钮

2024-12-02 19:47

关注

近期工作中遇到一个需求——实现一些酷炫的按钮,看到效果图之后,按钮确实漂亮,有弹跳、颜色渐变、扫光、霓虹灯,瞬间激起了我的好奇心,开启了研究实现之路。

所有button.gif

一、基础储备

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

1.1 animation

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

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

1.2 background-size

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

  1. background-size: length|percentage|cover|contain; 

1.3 background-position

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

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

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

1.4 linear-gradient

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

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

二、效果实现

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

2.1 弹跳效果

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

button1.gif

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

2.2 颜色渐变效果

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

创建一个静态按钮;

添加渐变颜色对称的的背景色;

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

最后利用animation实现操作位置的动画,模拟出颜色不断渐变的动画。

button2.gif

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

2.3 扫光效果

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

创建一个静态按钮;

在静态按钮前利用::before伪元素,设置该元素的背景色为白色微透明的颜色,并将该中心位置通过缩放移动到容器右侧;

利用animation实现动画,并不断变换位置实现扫光效果。

button3.gif

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

2.4 霓虹灯效果

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

创建一个静态按钮;

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

利用animation实现动画,并不断变换位置实现霓虹灯效果。

button4.gif

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

本文转载自微信公众号「前端点线面」,可以通过以下二维码关注。转载本文请联系前端点线面公众号。

 

来源:前端点线面内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯