好久没写东西了,最近很乱,从一个状态切换到另一个状态,自己还没习惯。
随机到了首歌,貌似是国产动画"大鱼海棠"的主题曲《大鱼》,和"妖狐小红娘"的ED《东流》一样,都是不错的歌;听着听着就想写一篇文章。
先说一下购物车那种勾选效果,做为一只菜鸟前端工程师,上周听leader和别人提到,手机上的那种勾选效果,不用JS可以做到的,自己找了一下资料,原来是input和label再加上CSS就够了;
<ul class='item-list'>
<li class='item'>
<div class='select'>
<input type='checkbox' id='foo1'/ class='ipt'>
<label for='foo1' class='lab'></label>
</div>
<div class='des'>
<h4>标题</h4>
<p>内容介绍</p>
</div>
</li>
<li class='item'>
<div class='select'>
<input type='checkbox' id='foo2'/ class='ipt'>
<label for='foo2' class='lab'></label>
</div>
<div class='des'>
<h4>标题</h4>
<p>内容介绍</p>
</div>
</li>
</ul>
CSS中就是隐藏
input
,利用label
做样式;本质仍旧是利用input type='checkbox'
然后这个input:active
之后,label怎么变样式的问题;在线效果JSBIN;这个是多选,单选代码比这个简单,直接上预览,要不然后面的主角就不能出场了JSBIN
好了,主角登场了,纯CSS模拟iOS中Switch按钮效果:
- 首先是我思考这个问题的思路,既然抛弃JS也能做到,说明他们的着力点都是一样的,Switch无非是两种状态的切换,中间增加过渡时间,也就有一个切换的效果,那么必然有两种状态和分别两套样式;
- 打开你的iPhone,这个小滑块在前端这里就是位置的移动,
position
定位就来了,那么在横向上移动就可以解决问题了; - 看看预览图,在线的地址依旧等着你JSBIN