HTML5瀑布流图片加载：CSS5修饰效果展示

180 浏览量更新于2024-09-01 收藏 52KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

资源详情

资源推荐

HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影实现的图片无限加载的瀑布流效果另带边框圆角阴影

一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，

还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果等

又一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，演示页面中一共调用了7张图

片，为了演示方便，这里让其随滚动条的滚动自动循环显示，这样大家更能清楚的看明白瀑布流的效果。除了实现瀑布流，还

加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果等，是学习瀑布流的好素材。

复制代码

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<title>jQuery无限加载瀑布流</title>

/* 标签重定义 */

body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) repeat;}

img{border:none;}

a{text-decoration:none;color:#444;}

a:hover{color:#999;}

#title{width:600px;margin:20px auto;text-align:center;}

/* 定义关键帧 */

@-webkit-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-moz-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-ms-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-o-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

/* wrap */

#wrap{width:auto;height:auto;margin:0 auto;position:relative;}

#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}

#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}

#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}

#wrap .box .info .pic:hover{

-webkit-animation:shade 3s ease-in-out 1;

-moz-animation:shade 3s ease-in-out 1;

-ms-animation:shade 3s ease-in-out 1;

-o-animation:shade 3s ease-in-out 1;

animation:shade 3s ease-in-out 1;

}

#wrap .box .info .pic img{width:260px;border-radius:3px;}

#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-

size:18px;font-weight:bold;overflow:hidden;}

</style>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38606897

粉丝: 7
资源: 892

HTML5瀑布流图片加载：CSS5修饰效果展示

waterfall无限动态加载图片支持手机移动端的瀑布流插件

jquery自适应屏幕瀑布流图片无限加载效果

基于html和CSS3制作酷炫的导航栏

css3边框、阴影与圆角效果的实现

qt主界面边框圆角阴影

HTML为图片添加圆角矩形边框和阴影

css圆角边框设置阴影

html 边框圆角，边框颜色渐变代码实现

html 边框圆角，颜色渐变代码实现

QT代码实现窗口边框圆角

web前端用hbulider写标题要绿色的，并有文字阴影，6张图片当鼠标经过图片边框显示圆角

android图片边框变为圆角

qt5设置窗口边框圆角

html如何给边框加阴影

微信小程序开发边框圆角

html nav标签边框阴影效果怎么设置

html圆角边框代码

页面中应该包含HTML5的主要特性，如百分比布局、页面框架iframe、圆角边框、阴影、动画、音视频标签、画布等内容；用html5+css写一个页面有导航栏 ，有页脚

html设置圆角边框

html5+圆角过渡直角边框

最新资源

页面中应该包含HTML5的主要特性，如百分比布局、页面框架iframe、圆角边框、阴影、动画、音视频标签、画布等内容；用html5+css写一个页面有导航栏，有页脚