<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. Markdown 模板

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  2. headfirst设计模式（3）—装饰者模式

    序 好久没写设计模式了,自从写了两篇之后,就放弃治疗了,主要还是工作太忙了啊(借口,都是借口),过完年以后一直填坑,填了好几个月,总算是稳定下来了,可以打打酱油了. 为什么又重新开始写设计模式呢?学习 ...

  3. 云计算之阿里仓库停止openstack mitaka源报错“No package centos-release-openstack-mitaka available.”

    之前学习了一个月的openstack的mitaka版本,写完脚本放置一段时间,最近准备正式部署突然发现 No package centos-release-openstack-mitaka avail ...

  4. angular smart-table组件如何定制化之初步研究

    table表运用在后台管理用得频繁,一般bootstrap的class="table"就能满足样式需求以及分页需求,但是每个产品经理需求不一样,比如说分页:bootstrap分页实 ...

  5. 【框架学习与探究之定时器--Quartz.Net 】

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7572174.html 前言 这里相信大部分玩家之前现在都应该有过使用定时器的时候或者需求,例如什么定时 ...

  6. epoll的ET和LT两种模式对比及注意事项

    ET模式: 因为ET模式只有从unavailable到available才会触发,所以 1.读事件:需要使用while循环读取完,一般是读到EAGAIN,也可以读到返回值小于缓冲区大小: 如果应用层读 ...

  7. DialogFragment的应用

    一.DialogFragment简单介绍: 1.基本概念 DialogFrament 指一个与fragment建立了关联的Dialog, 随fragment生, 随fragment死, 即Dialog ...

  8. unset与unlink

    unset() -- 释放给定的变量 详见->http://www.kuqin.com/php5_doc/function.unset.html unlink() --删除文件    常用于用户 ...

  9. Sequence query 好题啊

    Sequence query Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Subm ...

  10. C# 7.0 新特性：本地方法

    C# 7.0:本地方法 VS 2017 的 C# 7.0 中引入了本地方法,本地方法是一种语法糖,允许我们在方法内定义本地方法.更加类似于函数式语言,但是,本质上还是基于面向对象实现的. 1. 本地方 ...