纯CSS实现button按钮
小葵花课堂上课啦!!!爱学习的小伙伴赶紧带着小板凳拿着瓜子去村口集合啦
我们在工作中或者些项目的时候会遇到一个需求——实现一些酷炫的按钮,我在无聊的时候有各种炫酷的按钮,看到效果图之后,按钮确实漂亮,有弹跳、颜色渐变、扫光、霓虹灯,接下来就看看如何制作的
一、基础准备
实现这些漂亮的按钮主要利用了一些CSS的属性,主要有animation、background-size、background-position、linear-gradient(),下面对这四个内容进行简要概述。
1.1 animation
animation
属性用来指定一组或多组动画,每组之间用逗号相隔,其语法如下所示
animation: name duration timing-function delay iteration-count direction;
1.2 background-size
background-size
设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸,其语法如下所示,
background-size: length|percentage|cover|contain;
1.3 background-position
background-position
为每一个背景图片设置初始位置。这个位置是相对于由background-origin
定义的位置图层的,
在使用这个属性时有一个位置必须特别注意,否则很难理解为什么background-position指定的位置和自己想要的不一样,这个位置就是其百分比的计算公式,通过下面公式就可以理解设定百分比后背景图片成了什么结果了:
background-postion:x y;
x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
1.4 linear-gradient
linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>
数据类型,是一种特别的<image>
数据类型,其语法如下所示,
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
二、效果实现
然后利用animation属性,创建动画,当变换到50%时,按钮变换到1.2倍,到动画100%时按钮又恢复原样。
<div class="button1"><span>立即下载</span>
</div>
.button1 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;animation: zoomIn 1.5s infinite;text-align: center;
}
@keyframes zoomIn {50% {transform: scale(1.2);}100% {transform: scale(1);}
}
2.2 颜色渐变效果
背景色x轴方向拉伸至200%,这样就可以让原来对称轴处的背景色由中间到了右侧;
最后利用animation实现操作位置的动画,模拟出颜色不断渐变的动画。
<div class="button2"><span>立即下载</span>
</div>
.button2 {display: inline-block;width: 200px;height: 46px;line-height: 46px;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);background-size: 200%;animation: colorGradient 1.5s infinite;
}@keyframes colorGradient {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}
2.3 扫光效果
在静态按钮前利用::before伪元素,设置该元素的背景色为白色微透明的颜色,并将该中心位置通过缩放移动到容器右侧;
利用animation实现动画,并不断变换位置实现扫光效果。
<div class="button1"><span>立即下载</span>
</div>
.button1 {width: 200px;height: 46px;line-height: 46px;background-color: #2e82ff;color: #ffffff;font-size: 18px;text-align: center;border-radius: 27px;position: relative;
}
.button1::before {content: "";position: absolute;left: 0px;width: 100%;height: 100%;background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);background-size: 200%;animation: wipes 1s infinite;
}
@keyframes wipes {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}
2.4 霓虹灯效果
在静态按钮前利用::before伪元素,设置该元素的背景色为倾斜的霓虹灯效果,该效果实现是通过创建一个20px * 20px的正方形背景,然后利用linear-gradient将背景色135°方向渐变倾斜,实现小返回的霓虹灯,然后通过背景不断repeat实现整个的效果;
利用animation实现动画,并不断变换位置实现霓虹灯效果
<div class="button1"><span>立即下载</span>
</div>
.button1 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;position: relative;overflow: hidden;
}
.button1:before {content: "";position: absolute;left: 0px;width: 100%;height: 100%;background-size: 20px 20px;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%);animation: moveblock 0.5s linear infinite;
}
@keyframes moveblock{0% {background-position: 0px 0px;}100% {background-position: 20px 0px;}
}
基本一些炫酷的按钮都是利用animation、background-size、background-position、linear-gradient(),完成的,感兴趣的可以去试试
纯CSS实现button按钮相关推荐
- 纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化 效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
- 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果?
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...
- 自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="utf-8" co ...
- 【CSS】button(按钮)去默认样式
button 按钮去掉默认的灰色样式 给它设置 border: 0
- CSS实现button按钮的点击效果
需求 如下图所示,如果我们要实现这样的按钮点击效果,用CSS怎样去实现呢? 实现 个人方法是通过伪元素before来实现,上代码: HTML: <button class="prima ...
- 纯css书签导航按钮
最近在写个网站,发现导航栏怎么写都不好看.后来在看别人的网站的时候发现了一个不错的设计,于是乎就想自己去试试如何写出同样的效果.先贴别人网站导航的效果图. 类似书签式的立体导航,瞬间就觉得这个设计真的 ...
- 如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yRyOZr 可交互视频 ...
- 纯css实现iphone按钮(例飞行模式)
1.本来的思路: 我使用两个div分别实现圆角矩形和圆形,并将其嵌套在一起,使圆形在圆角矩形内部.然后布局使用margin:0 auto; 2.出现的问题: 当使用伪类选择器hover或者active ...
- 使用纯css做的按钮
http://www.zhangxinxu.com/study/200910/css-width-height-auto-btn.html#nog http://hi.baidu.com/louve0 ...
最新文章
- C语言实现将彩色bmp图像转化为灰图、灰度图像反色
- HTML块,含样式的标签
- CentOS7 安装 Nginx PHP
- 403 forbidden nginx_5,Logstash正则提取Nginx日志 - pwcc
- 令牌环算法_一环(令牌)将它们全部统治
- python 文字生成图片
- PMP笔记-项目管理过程中的审计类型
- BT搜索引擎TorrentSpy被迫永久关闭
- uniApp使用高德地图api
- 冰点还原精灵7.0密码忘记的解决方案
- AutoGPT保姆级使用教程
- 2022年公共广播火灾报警系统市场深度分析及发展研究预测报告
- 苹果笔记本能不能用python_苹
- 雏凤清音——面向数据的前端编程方法
- PCB设计学习笔记(四)PCB电源系统
- STM32-点灯程序
- NES专题——NES的游戏硬件
- Revit2018使用lumion插件DAE格式模型,revit崩溃解决方法
- 实用 POI工具类(Spring boot)
- STATS 782 - Numerical Computation
热门文章
- JAVAweb JSP飞机订票系统航空机票预订销售系统(机票预订系统)
- java计算机毕业设计网上书店进销存管理系统源码+数据库+系统+lw文档+mybatis+运行部署
- 如何把iphone 6s通讯录导入到诺基亚E72i内
- 更改 Normal 模板 (Normal.dotm)
- 网易云课堂C++开发工程师案例-网吧前台收银系统(MFC+ADO)C++收银系统完整
- 增加Java项目经验
- C#药店进销存管理系统,源码分享
- 10000亿的暴利:数字化营销今生与未来
- 数字化营销的意义所在
- 关于NXP公司的IMX6系列芯片参考资料体系介绍