请选择 进入手机版 | 继续访问电脑版

网页UI-自定义表单开关switch按钮

发表于 2016-12-12 17:33 显示全部楼层 20 1109

本帖最后由 赵延明老师 于 2017-5-29 20:46 编辑

简介

网页UI自定义组件第四讲 自定义表单开关按钮
网页上常见的种种UI效果我们经常感觉太漂亮了。接下来的几天我们会一直来使用CSS3来制作一些常见的UI效果,来改变浏览器默认UI效果。请大家持续关注。
今天我们要分享的是关于浏览器的表单元素中最让人头疼的自定义表单开关按钮。同样的会贴上视频。

常见的网页UI效果

20161205172605_813497.png

效果图2.png

案例效果


开关按钮.png

技巧说明

使用CSS3伪类:checked :before 来进行制作,同样的要取消掉浏览器的默认效果,使用-webkit-appearance: none来去掉,以及及box-shadow属性及transition过渡和transform转换。详细效果请参见视频:

视频

演示地址及详细代码

回复可查看全部代码:


游客,如果您要查看本帖隐藏内容请回复



想了解更多内容,可以点击以下链接:

小码哥官网:http://www.520it.com/

网页UI学院:http://www.520it.com/special/ui


回复 使用道具
举报
小肥

发表于 2017-12-21 18:07 显示全部楼层

很好很好

回复 支持 反对 使用道具
举报
Vincent_RRrGY

发表于 2017-05-31 14:39 显示全部楼层

6666666666

回复 支持 反对 使用道具
举报
张铭张

发表于 2017-05-12 21:19 显示全部楼层

按钮非常漂亮,值得一学

回复 支持 反对 使用道具
举报
收起回复 展开
赵延明老师 张铭张   发表于 2017-05-18 15:43

你还可以把它美化的更漂亮一些。

loverol

发表于 2017-02-09 15:45 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
西山霸王花

发表于 2017-02-09 14:30 显示全部楼层

回复 支持 反对 使用道具
举报
Viper

发表于 2017-02-09 08:41 显示全部楼层

回复 支持 反对 使用道具
举报
烟雨过客

发表于 2017-02-09 07:47 显示全部楼层

回复 支持 反对 使用道具
举报
大道至简

发表于 2017-02-09 05:37 显示全部楼层

作为新人,在吧里不敢大声说话,也不敢得罪人,只能默默地顶完贴转身就走,不求深藏功与名,只求前排混脸熟

回复 支持 反对 使用道具
举报
大道至简

发表于 2017-02-09 05:34 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

3058

学币

3337

积分

小码哥名师团队

Rank: 5Rank: 5

积分
3337

小码哥一周年勋章关注小码哥教育公众号意见领袖勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育