CSS3实现横向展示图片滑动展示效果
一个使用CSS3动画效果实现的图片宽度 横向展开的效果。
HTML代码如下：
<ul id="kwicks"><li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="Joh...
一个使用CSS3动画效果实现的图片宽度 横向展开的效果。
HTML代码如下：
<ul id="kwicks">
<li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li>
<li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li>
<li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li>
<li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li>
</ul>
上面的代码仅由一个ul组成，对应的CSS代码如下：
/*横向展示关键是添加: overflow-x:hidden,避免出现异常*/
#kwicks { width: 590px; overflow-x: hidden; }
#kwicks:hover li a { width: 100px; }
#kwicks li {
float: left;
overflow-x: hidden;
display: block;
}
/*鼠标放上去时：宽度加大，具体过程由动画实现*/
#kwicks li:hover a { width: 285px !important; }
/* 实现宽度变大的动态过程*/
#kwicks li a {
display: block;
text-indent: -9999px;
width: 134px;
height: 143px;
transition-property: width;
transition-duration: 1s;
}
非常简单的一个动画效果，代码解析：
transition-property：width; /*会产生带有平滑改变元素宽度的过渡效果*/
transition-duration: 1s; /*过渡效果持续1秒*/
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
程序员编程交流QQ群：805358732
如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。
- 发表于 2021-07-05 11:45
- 阅读 ( 621 )
- 分类：WEB前端开发
