button按钮样式_前端开发-CSS 伪元素实现按钮波纹效果

CSS伪元素主要是指HTML中没有定义、存在的元素,伪元素本身不是真正的页面元素,但是伪元素在使用过程中,其用法与效果与其他真正页面元素是一样的。伪元素只能在定义基础上动态显示其运行效果,在HTML源文件中并没有该元素的真正代码。CSS3中所定义的所有伪元素与伪类描述如下图所示:

f05677c9eb976374c0ffbfc79a4868c0.png

CSS伪元素与伪类


按钮波纹ripple效果展示

4f9199420fd5a9b3f80bf4bde86659e7.png

ripple波纹

按钮的波纹效果主要是指按钮在点击时展示出的动态效果。在实现效果过程中可行的方法方式较多,例如可以使用JavaScript、CSS动画、JQuery等。网上目前按钮波纹实现效果较多,部分样式效果展示如下:

be5a4f9c2b8405a88ee5db345ca3a32d.gif

波纹效果展示


CSS 伪类波纹效果实现

CSS伪类波纹效果主要借助于before、after伪类与hover悬停选择器等实现类似波纹效果,本文主要借助after及hover等实现按钮的波纹效果,本例设计两种类似波纹效果,最终实现效果展示如下图所示:

15ccd19a8418eedae692a2ba6ca6cde2.gif

设计样式1

ae6219efe2d8bef10f34581027957ac0.gif

设计样式2

本文设计实现的两类波纹效果样式描述如上图gif所示,其实现过程描述如下:

1、按钮基本样式设计

本例按钮基本样式主要包括宽度、高度、背景颜色等。使用元素选择器与类选择器定义了按钮元素的基本样式,其样式实现代码描述如下:

button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}

.button类主要用以实现设计样式1,.button2类主要用于实现设计效果2,两类按钮定义描述如下:

Ripple1Ripple2

2、after伪元素使用

after伪元素主要用于实现在指定元素的后面添加新的内容。本例提供的两种设计方式都是在button元素的后面添加新的类似div的新元素,其中样式1,新添加的元素与button本身重合,尺寸也一致。设计样式2中after元素位于button的底部位置,宽度与button相同,高度为指定尺寸5px。两个设计中after元素样式为实现动态展开效果都涉及宽度width为0。after元素的样式定义如下:

.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; }.button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }

after元素CSS样式定义中使用了transition属性实现动画效果,即在0.4s内实现宽度从0改变为100%。

3、hover选择器的使用

hover选择器为悬停选择器,主要对鼠标在HTML元素悬停时样式进行设置。本例两个涉及效果都是借助hover悬停选择器对after样式进行设置,在初始化设置宽度为0的基础上宽度改变为100%,最终实现两端伸展的效果。hover选择器定义after元素样式描述如下所示:

.button:hover::after{left:0%; width: 100%; opacity: 0.6;}.button2:hover::after{left:0%; width: 100%;}

以上给出了CSS伪元素实现波纹效果,主要借助了after、before伪元素与hover悬停选择器等。设计实现效果完整源文件截图如下:

0d7a8cee22ef212c6b0081ff6bfefce7.png

案例完整代码


以上给出了JavaScript中的事件基本概念及案例分析,如有问题可在评论区讨论。本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。期待大家关注!相关文章链接如下:

前端开发-JavaScript中的事件(Event)及事件处理总结

前端开发-CSS3动画实现焦点(图文轮播)图效果

前端开发-JavaScript DOM动态生成文本框

前端设计-教你如何快速绘制HTML5动画

前端设计-响应式页面开发基础

前端设计-Ajax技术及实例展示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值