css相关知识：

1. 使用box-shadow设置图片阴影,为照片加上阴影

eg： box-shadow: 0 0 5px 3px #abc

2. 使用tansform-origin定义变形原点

eg: -webkit-transform-origin: 0 1px

3. 使用transform变形，常用变形函数有scale、rotate、translate

eg:

-webkit-transform: scale(0.8, 0.5);

-webkit-transform: skew(-30deg, -10deg);

-webkit-transform: rotate(30deg);

-webkit-transform: translate(10px, 10px);

定义多个变形：

-webkit-transform: rotate(30deg) translate(10px, 10px) scale(, );

4. transition实现过渡效果

transition: transition-property || transition-duration || transition-timing-function || transition-delay

eg:

-webkit-transition: all 1000ms linear 500ms

过渡函数主要包括：

linear 一个速度

ease 先慢再快再慢

ease-in  先慢后越来越快

ease-out  先快后越来越慢

ease-in-out  开始和结束时都很慢

cubic-bezier： 速度为贝塞尔曲线

5. 添加内容 :before :after 添加content内容

6. :hover添加鼠标滑过效果

效果：

鼠标滑过使用scale拉伸图片，变换角度， 添加内容：

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

body{

    background: url(../images/12.jpg);

    background-size: cover;

}

#gallary{

    margin: 10px auto;

    padding: 40px;

    list-style: none;

    width:1060px;

}

#gallary li{

    float: left;

    width: 206px;

    height: 160px;

    oveflow: visible;

}

#gallary li a{

    color: #333;

    text-decoration: none;

    font-size: 4px;

    display: block;

    text-align: center;

    background-color: #FFF;

    padding: 3px;

    opacity: 0.8;

    box-shadow: 0 0 5px 2px #333;

}

#gallary li a{

    -webkit-transition: all 500ms linear;

    -moz-transition: all 500ms linear;

    transition: all 500ms linear;

    -webkit-transfrom-origin: 0 0;

    -moz-transfrom-origin: 0 0;

    transfrom-origin: 0 0;

    -webkit-transform: rotate(-15deg);

    -moz-transform: rotate(-15deg);

    transform: rotate(-15deg);

}

#gallary li a img{

    width: 200px;

}

#gallary li:nth-child(3n) a{

    -webkit-transform: rotate(20deg);

    -moz-transform: rotate(20deg);

    transform: rotate(20deg);

}

#gallary li:nth-child(4n) a{

    -webkit-transform: rotate(15deg);

    -moz-transform: rotate(15deg);

    transform: rotate(15deg);

}

#gallary li:nth-child(7n) a{

    -webkit-transform: rotate(-10deg);

    -moz-transform: rotate(-10deg);

    transform: rotate(-10deg);

}

#gallary li:nth-child(9n) a{

    -webkit-transform: rotate(-20deg);

    -moz-transform: rotate(-20deg);

    transform: rotate(-20deg);

}

#gallary li a:hover{

    position: relative;

    z-index: 1;

    opacity: 1;

    -webkit-transform: rotate(0deg) scale(2);

    -moz-transform: rotate(0deg) scale(2);

    transform: rotate(0deg) scale(2);

}

#gallary li a:hover:after{

    content: attr(title);

}

</style>

</head>

<body>

<ul id="gallary">

    <li><a href="#" title="picture1"><img src="../images/1.jpg"></a></li>

    <li><a href="#" title="picture2"><img src="../images/2.jpg"></a></li>

    <li><a href="#" title="picture3"><img src="../images/3.jpg"></a></li>

    <li><a href="#" title="picture4"><img src="../images/4.jpg"></a></li>

    <li><a href="#" title="picture5"><img src="../images/5.jpg"></a></li>

    <li><a href="#" title="picture7"><img src="../images/7.jpg"></a></li>

    <li><a href="#" title="picture8"><img src="../images/8.jpg"></a></li>

    <li><a href="#" title="picture9"><img src="../images/9.jpg"></a></li>

    <li><a href="#" title="picture10"><img src="../images/10.jpg"></a></li>

    <li><a href="#" title="picture6"><img src="../images/11.jpg"></a></li>

    <li><a href="#" title="picture11"><img src="../images/1.jpg"></a></li>

    <li><a href="#" title="picture12"><img src="../images/2.jpg"></a></li>

    <li><a href="#" title="picture13"><img src="../images/3.jpg"></a></li>

    <li><a href="#" title="picture14"><img src="../images/4.jpg"></a></li>

    <li><a href="#" title="picture15"><img src="../images/5.jpg"></a></li>

</ul>

</body>

</html>

css3图片墙的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. WordPress酷炫CSS3读者墙代码

    前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...

  3. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  4. CSS3图片倒影技术实现及原理

    CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...

  5. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  6. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  7. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 超厉害的CSS3图片破碎爆炸效果！

    var fx  = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...

  9. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

随机推荐

  1. 造一个Badge Service（徽章）的轮子

    什么是Badge Service 细心的读者朋友一定在很多Github的Repo,npm的package页面看到过诸如 的徽章.这些徽章是干什么用的? 大家看到上文中我引用的Badge的左侧,是Dow ...

  2. DOM操作--表格点击行变色

    点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...

  3. 黑马程序员-File类+递归的简单应用

    Java File类   Java.io.File Java文件类以抽象的方式代表文件名和目录路径名.该类主要用于文件和目录的创建.文件的查找和文件的删除等. File对象代表磁盘中实际存在的文件和目 ...

  4. ASP.NET程序如何更新发布

    ASP.NET程序如何更新发布 一.首先右键项目,点击“发布” 然后,新建名称.类型选择文件,然后点击下一步: 点击发布即可! 二.

  5. 尽量不要用select into 复制表

    select into 复制表会带来灾难后果,因为只是复制了一个外壳,就像克隆人,有躯体没意识,像原表的主键 外键 约束 触发器 索引都不会被复制过来, 创建一个表:CREATE TABLE [dbo ...

  6. CSS3高性能动画

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用w ...

  7. ubuntu 12.04安装redis2.6.16

    1.下载源文件并安装 登录 http://www.redis.io/download 下载redis-2.6.16.tar.gz tar -zxf redis-2.6.16.tar.gz cd red ...

  8. 使用Gulp构建本地开发Web服务器

    前端模拟ajax,就需要配置web服务器(apache,iis,nginx),有点麻烦 代码有一点点修改,就需要F5刷新页面很麻烦 Gulp + Gulp-connect + watch + live ...

  9. Setup VSFTPD Server with Virtual Users On CentOS, RHEL, Scientific Linux 6.5/6.4/6.3

    We have already shown you How to Setup VSFTPD Server on CentOS 6.5/6.4 in our previous article. In t ...

  10. 前端开发web组件之旅（一）-- 定义与加载组件

    /* 前言 */ 自上而下的 职责和API应用层框架层框架浏览器 一 组件定义与调用 1.增加一个组件 tabview.css ------------------------------------ ...