* { padding:0; margin:0; } li { position:relative; list-style:none; float:left; margin-right:20px; } img { width:120px; height:80px; cursor:pointer; } a.on { display:inline-block; width:10px; height:5px; background:red; line-height:0; font-size:0; vertical-align:middle; -webkit-transform:rotate(45deg); position:absolute; right:13px; bottom:5px; } a.on:after { content:'/'; display:block; width:20px; height:5px; background:red; -webkit-transform:rotate(-90deg) translateY(-50%) translateX(50%); position:absolute; }
有一直是利用图片去做的,这个是纯css3写的,其实原理很简单,时间急写的有点粗糙,现在选择的时候会抖动,大神们可以在点击的时候改一下宽度和高度!