* {
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写的,其实原理很简单,时间急写的有点粗糙,现在选择的时候会抖动,大神们可以在点击的时候改一下宽度和高度!