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
阅读 ( 418 )
分类：WEB前端开发

CSS3实现横向展示图片滑动展示效果

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »