2023年7月9日发(作者：)

前端开关按钮样式_前端开发-CSS伪元素实现按钮波纹效果CSS伪元素主要是指HTML中没有定义、存在的元素，伪元素本⾝不是真正的页⾯元素，但是伪元素在使⽤过程中，其⽤法与效果与其他真正页⾯元素是⼀样的。伪元素只能在定义基础上动态显⽰其运⾏效果，在HTML源⽂件中并没有该元素的真正代码。CSS3中所定义的所有伪元素与伪类描述如下图所⽰：CSS伪元素与伪类按钮波纹ripple效果展⽰ripple波纹按钮的波纹效果主要是指按钮在点击时展⽰出的动态效果。在实现效果过程中可⾏的⽅法⽅式较多，例如可以使⽤JavaScript、CSS动画、JQuery等。⽹上⽬前按钮波纹实现效果较多，部分样式效果展⽰如下：波纹效果展⽰CSS 伪类波纹效果实现CSS伪类波纹效果主要借助于before、after伪类与hover悬停选择器等实现类似波纹效果，本⽂主要借助after及hover等实现按钮的波纹效果，本例设计两种类似波纹效果，最终实现效果展⽰如下图所⽰：设计样式1设计样式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，两类按钮定义描述如下：Ripple1Ripple22、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: "

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悬停选择器等。设计实现效果完整源⽂件截图如下：案例完整代码以上给出了JavaScript中的事件基本概念及案例分析，如有问题可在评论区讨论。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上⽅⾯有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待⼤家关注！相关⽂章链接如下：前端开发-JavaScript中的事件(Event)及事件处理总结前端开发-CSS3动画实现焦点(图⽂轮播)图效果前端开发-JavaScript DOM动态⽣成⽂本框前端设计-教你如何快速绘制HTML5动画前端设计-响应式页⾯开发基础前端设计-Ajax技术及实例展⽰