<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(images/bg.jpg);
}
#div1{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#div1 div{
position: absolute;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-ms-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
border: 6px solid #FFF;
box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
left:-300px;
top:-300px;
cursor: pointer;
}
#div1 div span{
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition:1.5s opacity ease-in-out;
-moz-transition:1.5s opacity ease-in-out;
-ms-transition:1.5s opacity ease-in-out;
-o-transition:1.5s opacity ease-in-out;
}
#div1 .active{
border:1px solid #FFF;
box-shadow: 0 0 2px #000;
}
#prev,#next{
position: absolute;
width: 60px;
height: 60px;
top: 50%;
margin-top: -30px;
border: 1px solid #999;
box-shadow: 0 0 1px rgba(0,0,0,0.7);
z-index: 2;
-webkit-transition:0.7s all ease;opacity: 0.6;
-moz-transition:0.7s all ease;opacity: 0.6;
-ms-transition:0.7s all ease;opacity: 0.6;
-o-transition:0.7s all ease;opacity: 0.6;
}
#prev{
left: -20px;
background: url(images/prev.png) center no-repeat #FFF;
border-radius: 0 8px 8px 0;
display: none;
}
#prev:hover{
left: 0px;
opacity: 1;
}
#next{
right: -20px;
background: url(images/next.png) center no-repeat #FFF;
border-radius: 8px 0 0 8px;
display: none;
}
#next:hover{
right: 0px;
opacity: 1;
}
.back{
position: absolute;
right: 20px;
top:10px;
color: #000;
text-shadow:1px 1px 3px #999999;
text-decoration: none;
z-index: 10000
}
</style>

<body>
<a href="http://http://www.cnblogs.com/work-web/" target="_blank" class="back"></a>
<a href="javascript:void(0)" id="prev"></a>
<a href="javascript:void(0)" id="next"></a>
<div id="div1"></div>
</body>

h5实现照片墙效果的更多相关文章

  1. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

  2. javascript照片墙效果

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 原生JS编写的照片墙效果实例演示特效

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

  4. js实现照片墙效果

    本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...

  5. h5 吸顶效果 顶部悬浮

    window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.sc ...

  6. iOS -- 透明H5(webView)效果的实现

    前几天有一个完全透明的webView加载H5页面的效果的实现,就相当于是一个半透明的遮罩层,上面有一个不透明的图片,一般原生的带遮罩层的弹框会采用这种方式,如果是原生代码实现,就简单的多了,视图的叠加 ...

  7. 使用canvas实现画中画效果的H5

    最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...

  8. 一次H5毛玻璃效果有感

    印象中H5实现毛玻璃效果是挺好实现的,主要的代码就是css的filter:blur. 之前也用过几次,给背景图加高斯模糊啊,给一个div加高斯模糊啊.只要给需要添加高斯模糊的元素直接添加filter属 ...

  9. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

随机推荐

  1. 201521123026《JAVA程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  2. JavaSE（十）之Collection总结

    前面几篇把集合中的知识大概都详细的说了一遍,但是我觉得还是要总结一下,这样的话,可以更好的理解集合. 一.Collection接口 首先我们要一张图来说明: Collection接口,它是集合的顶层接 ...

  3. lincode.41 最大子数组

    最大子数组   描述 笔记 数据 评测 给定一个整数数组,找到一个具有最大和的子数组,返回其最大和. 注意事项 子数组最少包含一个数 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题? ...

  4. 移动商城第八篇【添加商品之基本属性和大字段数据（FCK文本编辑器）】

    添加商品 修改对应的超链接url,controller转发到对应的JSP页面 <a href="${path}/item/toAddItem.do" class=" ...

  5. python实例编写（6）--引入unittest测试框架，构造测试集批量测试（以微信统一管理平台为例）

    ---恢复内容开始--- 一.python单元测试实例介绍 unittest框架又叫PyUnit框架,是python的单元测试框架. 先介绍一个普通的单元测试(不用unittest框架)的实例: 首先 ...

  6. RG_4

    集训前半段马上就要结束了. 很多作业等待着我. 真希望作业君不喜欢我.

  7. HDFS源码分析之NameNode（1）————启动过程

    源码:2.8.0 入口类:org.apache.hadoop.hdfs.server.namenode.NameNode main方法会调用createNameNode 创建 NameNode 实例, ...

  8. #翻译#原文来自Database.System.Concepts(6th.Edition.2010)2.6Relational Operations，原文作者Abraham Silberschaz ， Henry F. Korth ， S. Sudarshan

    2.6关系操作 所有的过程关系查询语言都提供一组操作,这些操作可以应用于单个关系或一对关系.这些操作具有良好的和期望的属性,它们的结果总是一个单一的关系.这个属性允许一个以模块化的方式组合其中的几个操 ...

  9. 从头编写 asp.net core 2.0 web api 基础框架 (2)

    上一篇是: http://www.cnblogs.com/cgzl/p/7637250.html Github源码地址是: https://github.com/solenovex/Building- ...

  10. 学习总结---SNAT和DNAT

    1.SNAT是结合源ip+源端口号变化的NAT功能. DNAT是将目的ip直接转换成私有的目的ip.(是否转换目的端口号?) 2.SNAT的应用场景:公司内部访问互联网时,使用公共的公网ip.从内到外 ...