多图片聚拢效果
参考效果： http://xuan.news.cn/zt/ouzhoubei.html
聚拢效果 - 锐客网 #container {
width: 900px;
height: 480px;
margin: 40px auto;
position: relative;
overflow: visible;
}
#container img {
visibility: hidden;
position: absolute;
left: 50%;
top: 50%;
width: 160px;
margin: -50px 0 0 -80px;
transition: all 2s ease;
}
p {
text-align: center;
}< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/33/wKhThldP4_AEAAAAAAAAAAAAAAA985.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M03/06/35/wKhTh1dP5r8EAAAAAAAAAAAAAAA195.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M05/04/DB/wKhThVdP65AEAAAAAAAAAAAAAAA306.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M01/06/D8/wKhThldQ02IEAAAAAAAAAAAAAAA032.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic001/M02/29/89/wKhTg1dQ21MEAAAAAAAAAAAAAAA496.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2GwEAAAAAAAAAAAAAAA281.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M04/06/DD/wKhTh1dQ2I4EAAAAAAAAAAAAAAA955.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2JwEAAAAAAAAAAAAAAA723.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M07/05/80/wKhThFdQ2tIEAAAAAAAAAAAAAAA659.jpg" >
< img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M09/04/E5/wKhThFdP8m0EAAAAAAAAAAAAAAA547.jpg" >图片和效果参考均来自 http://xuan.news.cn/zt/ouzhoubei.html
【多图片聚拢效果】简单参考答案： http://runjs.cn/detail/dziuvuuk
推荐阅读
- 宽容谁
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 第6.2章（设置属性）
- 布丽吉特，人生绝对的赢家
- 家乡的那条小河
- 讲述，美丽聪明的海欧！
- 爱就是希望你好好活着
- 夜游宫|夜游宫 心语
- 昨夜小楼听风