CSS3小模块hover左右交替互换动画
2013-02-25 10:39
274 查看
<ul class="readers-list"> <li> <a href="#"> <img src="default.jpg" alt="" /> <em>点头猪</em> <strong>+10</strong><br /> lilyxue.blogbus.com/ </a> </li> <li> <a href="#"> <img src="default.jpg" alt="" /> <em>点头猪</em> <strong>+10</strong><br /> lilyxue.blogbus.com/ </a> </li> </ul>
*{ margin:0; padding:0; font-size:12px;} .readers-list{ line-height:18px; overflow:hidden; _zoom:1;} .readers-list li{ float:left; width:200px; *margin-right:-1px;} .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);} .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 0 0 2px;} .readers-list a:hover{ border-color:#bbb; box-shadow:#ccc 0 0 2px; background-color:#fff; background-image:none;} .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;} .readers-list img{ float:left; width:36px; height:36px; margin:0 8px 0 -40px; border-radius:2px} .readers-list a:hover img{ opacity:.6; margin-left:0;} .readers-list em{ font-style:normal; margin-right:10px;} .readers-list a:hover em{ color:#EE8B17; font-weight:bold;} .readers-list strong{ position:absolute; right:6px; top:4px; width:40px; text-align:right; font-size:14px;} .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)
原文转至 详细解说:简单CSS3实现炫酷读者墙
相关文章推荐
- css3 列表图片hover左右滚动效果
- CSS3制作hover下划线动画
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
- Hover.css:一组超实用的 CSS3 悬停效果和动画
- 纯CSS3进行hover时显示带箭头的tips提示动画效果
- CSS3制作hover下划线动画
- 鼠标hover时区块动画旋转变色的css3样式掩码
- CSS3制作hover下划线动画
- css3动画模块transform transition animation属性解释
- css3 hover 动画
- css3模块之动画animation
- css3实现从左右两边以动画的形式分别插入文字和图片
- 纯CSS3动画之左右翻转
- css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3)
- css3制作左右拉伸动画菜单
- CSS3 Hover 动画特效
- Hover.css:一组超实用的 CSS3 悬停效果和动画
- css3动画模块transform transition animation属性解释
- css3动画之左右摇摆
- CSS3中的变形与动画(一)