CSS3⼩模块hover左右交替互换动画
1 <ul class="readers-list">
2    <li>
3        <a href="#">
4            <img src="default.jpg" alt="" />
5            <em>点头猪</em>
6            <strong>+10</strong><br />
7            lilyxue.blogbus/
8        </a>
9    </li>
10    <li>
11        <a href="#">
12            <img src="default.jpg" alt="" />
13            <em>点头猪</em>
14            <strong>+10</strong><br />
15            lilyxue.blogbus/
16        </a>
17    </li>
18 </ul>
borderbox1 *{ margin:0; padding:0; font-size:12px;}
2 .readers-list{ line-height:18px; overflow:hidden; _zoom:1;}
3 .readers-list li{ float:left; width:200px; *margin-right:-1px;}
4 .readers-list a, .readers-list a:hover strong{ background-color:#f2f2f2; background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2); background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2); background-image:linear-gradient(#f8f8f8,#f2f2f2);}
5 .readers-list a{ position:relative; display:block; height:36px; margin:4px; padding:4px 4px 4px 44px; color:#999; overflow:hidden; border:1px solid #ccc; border-radius:2px; box-shadow:#eee 00 2px;}
6 .readers-list a:hover{ border-color:#bbb; box-shadow:#ccc 00 2px; background-color:#fff; background-image:none;}
7 .readers-list img, .readers-list em, .readers-list strong{ -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;}
8 .readers-list img{ float:left; width:36px; height:36px; margin:0 8px 0 -40px; border-radius:2px}
9 .readers-list a:hover img{ opacity:.6; margin-left:0;}
10 .readers-list em{ font-style:normal; margin-right:10px;}
11 .readers-list a:hover em{ color:#EE8B17; font-weight:bold;}
12 .readers-list strong{ position:absolute; right:6px; top:4px; width:40px; text-align:right; font-size:14px;}
13 .readers-list a:hover strong{ color:#EE8B17; height:44px; line-height:40px; right:150px; top:0; text-align:center; border-right:1px solid #ccc;}
point:
hover伪类部分定义完第⼆种效果，关键是给三个对象img em strong增加动画属性transition变换从⽽实现过渡；
box-shadow:Xoffset Yoffset blur color (inset)
原⽂转⾄

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。