css3图片墙
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图片墙的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- WordPress酷炫CSS3读者墙代码
前几日在大前端看到他站点中最新的CSS3读者墙代码,一看效果绚丽的不得鸟,立刻就开始研究了,多次研究未果,可终究是研究出来了,昨天刚成功,今天啊和童鞋来我站说读者墙头像显示不对,我一看,还真是,头像都 ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- CSS3图片倒影技术实现及原理
CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 超厉害的CSS3图片破碎爆炸效果！
var fx = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...
- 精选 5 个漂亮的 CSS3 图片滑过特效
这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...
随机推荐
- html 之前学习响应式的笔记
响应式的设计,根据用户设备的不同,用户屏幕大小不同,提供不同的网页设计http://mediaqueri.es/PhoneGap 使用2,如何模拟手机设备chome 浏览器 在32以上设备检测用 de ...
- （转）Spring 读书笔记-----使用Spring容器（一）
Spring有两个核心接口:BeanFactory和ApplicationContext,其中ApplicationContext是BeanFactory的子接口.他们都可代表Spring容器,Spr ...
- DLL Export 报错
编译报错: error : syntax error at token xxxx 修改非Unicode 系统区域设计即可
- .Net程序员学习Linux（二）
本次知识点:递归命令符,wc命令,文档编辑器 vi的简单使用,文本常用操作命令,find查询文件命令,grep匹配文本中对应的关键字 递归命令符 递归对于程序猿来说不默认,经常用于级联关系,一层套一层 ...
- 解读zookeeper的配置项
zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳数 Zoo ...
- Beyond Compare 设置打开文件的默认编码
转载:http://www.note4u.info/archives/360 Beyond Compare 每次打开都会以西欧(windows)打开文件,在有中文的地方,经常出现乱码.但是设置每个文件 ...
- Python：列表
#!/usr/bin/python3 #列表 是可变的,可修改的 listDemo = ["one","two","three"," ...
- POJ 1631 Bridging signals（LIS O(nlogn)算法）
Bridging signals Description 'Oh no, they've done it again', cries the chief designer at the Waferla ...
- 嵌入式web server——Goahead移植要点
前言 在嵌入式设备中,在没有液晶显示的情况下,可以使用web来访问设备,查看设备的运行状态以及进行参数设置,类似于路由器设置.网上有很多关于各种web server的优劣的评论,在此不讨论,只是介绍其 ...
- 使用sprintf打印float并控制小数位数时引起的问题
最近在做项目中发现一个Bug,直接把进程搞死,查了一下,居然是一个最不起眼的地方导致的,在此记录一下. 先看下面代码 #include <iostream> #include <st ...