h5实现照片墙效果
<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实现照片墙效果的更多相关文章
- 使用CSS3动画实现绚丽的照片墙效果
临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...
- javascript照片墙效果
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现照片墙效果
本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...
- h5 吸顶效果 顶部悬浮
window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.sc ...
- iOS -- 透明H5(webView)效果的实现
前几天有一个完全透明的webView加载H5页面的效果的实现,就相当于是一个半透明的遮罩层,上面有一个不透明的图片,一般原生的带遮罩层的弹框会采用这种方式,如果是原生代码实现,就简单的多了,视图的叠加 ...
- 使用canvas实现画中画效果的H5
最近看到一个挺有趣的H5,主要效果就是通过不断的放缩来展示画中画,网上找了一下并没有这方面的实现代码,故决定原创一下,并分享出来 主要的思路就是通过canvas不断的写入图片,考虑到每一层的图片的位置 ...
- 一次H5毛玻璃效果有感
印象中H5实现毛玻璃效果是挺好实现的,主要的代码就是css的filter:blur. 之前也用过几次,给背景图加高斯模糊啊,给一个div加高斯模糊啊.只要给需要添加高斯模糊的元素直接添加filter属 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
随机推荐
- Day-14： 常用的内建模块
collections包含对tuple.list.dict等派生出新功能 namedtuple用来为tuple类型派生出一个新名字的tuple类,并提供用属性引出的功能. >>> f ...
- python 中的%s是什么意思呢？
今天忽然想写Python中的%s的意思,它怎么理解呢,我查阅了一下相关文献,然后结合了自己的理解,分析如下: 这是一个字符串格式化语法(这是从c 中调用的) 具体请参阅 http://www. ...
- C#参数详解
参数 可选参数与命名参数 设计方法时,我们可以为部分参数设置默认值,在方法调用时就可以不提供该参数,使用其默认值.此外,调用方法时可以通过指定参数名的方式来传递参数.话不多说,请看以下示例: stat ...
- linux 命令随笔 ls cd pwd mkdir rm mv cp cat nl
Linux 命令练习 ls命令 ls就是list的简写,目的是打印当前目录下的清单 格式 ls[选项][目录名] 常用参数 -a –all 列出目录下的所有文件,包括以 . 开头的隐含文件 -l 除了 ...
- PostgreSQL使用MyBatis,insert时返回主键
MyBatis中普通的insert语句是这样的: <insert id="insert" parameterType="com.xxx.xxx.xxDo" ...
- ng-model值字符串转数值型（convertToNumber directive）
<select ng-model="model.id" convert-to-number> <option value="0">Zer ...
- Https系列之二：https的SSL证书在服务器端的部署，基于tomcat,spring boot
Https系列会在下面几篇文章中分别作介绍: 一:https的简单介绍及SSL证书的生成二:https的SSL证书在服务器端的部署,基于tomcat,spring boot三:让服务器同时支持http ...
- Python 接口测试（五）
五:使用python进行组织编写接口测试用例 接口测试其实就是几个步骤. 拿到接口的url地址 查看接口是用什么方式发送 添加请求头,请求体 发送查看返回结果,校验返回结果是否正确 明白了接口测试的测 ...
- MySQL基本语法(一)：和SQL Server语法的差异小归纳
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- MySQL主从同步和读写分离的配置
主服务器:192.168.1.126 从服务器:192.168.1.163 amoeba代理服务器:192.168.1.237 系统全部是CentOS 6.7 1.配置主从同步 1.1.修改主服务器( ...