... / nVoxel主页 » js/html/css » css实现IOS的switch开关效果

css实现IOS的switch开关效果

作者:T.n.T发表时间:2016-3-2本文链接:http://www.nvoxel.com/css-ios-switch.html

之前乘着空闲的时候自己弄了一个日语五十音的单页面,一方面是方便入门记忆,同时也算是温故一下css和部分js。
当时做的时候做了一个类似IOS里的switch效果按钮,如下:
switchbutton
今天恰巧看到腾讯新闻也有个类似的按钮,不过貌似是用js实现的。

五十音页面上的switch按钮当时我是用css实现的,由于兼容性问题最终还是没有放到页面上(当前页面还是用下拉列表的形式)。
主要问题是只有chrome支持animation动画,按钮的拖尾效果也就只能在chrome看到了,其它的css3特性必须在ie10以上才能看到。
测试链接如下:仿IOS的Switch按钮

具体思路可以看这里,关键词为label和input的checkbox属性:点击此处.

 

评论

(必填)


不是'叮'的一声变成别的东西才算是奇妙,那个走得很慢很慢,慢得不像话但是非常肯定,一直都在走得钟就已经很奇妙了
相遇 相识 相知 相爱 然后分开 / Themes by T.n.T