css3照片墙+曲线阴影

　　最近在学习jquery，晚上想复习下以前学过的知识，看到网上有关于css3照片墙的，感觉挺好玩的，就做了做。（以下图片均来自网络）

一、css3照片墙

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3照片墙</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="content">
			<img class="pic1" src="data:images/1.jpg" />
			<img class="pic2" src="data:images/2.jpg" />
			<img class="pic3" src="data:images/3.jpg" />
			<img class="pic4" src="data:images/4.jpg" />
			<img class="pic5" src="data:images/5.jpg" />
			<img class="pic6" src="data:images/6.jpg" />
			<img class="pic7" src="data:images/7.jpg" />
			<img class="pic8" src="data:images/8.jpg" />
			<img class="pic9" src="data:images/9.jpg" />
			<img class="pic10" src="data:images/10.jpg" />
		</div>
	</body>
</html>

css部分：

body{
　　background: url(../images/bg5.jpg) no-repeat top center fixed;
　　background-size: 100% auto;
}
.content{
	width: 900px;
    height: 600px;
    margin: 100px auto;
    position: relative;
}
img{
	width: 20%;
    height: auto;
    z-index: 1;
    position: absolute;
    padding: 10px 10px 15px 10px;
    background-color: white;
    border: 1px solid #ccc;
    /*动画的时间*/
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
}
img:hover{
　　z-index: 2;
　　/*缩放倍数*/
　　-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    /*阴影效果*/
    box-shadow: 10px 10px 20px #000;
}
/*下面对每一个图片进行旋转处理*/
.pic1{
	left: 100px;
	top: 50px;
	-webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.pic2{
	left: 280px;
	top: 60px;
	-webkit-transform: rotate(100deg);
    -moz-transform: rotate(10deg);
	transform: rotate(10deg);
}
.pic3{
	left: 450px;
	top: 50px;
	-webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
	transform: rotate(20deg);
}
.pic4{
	left:630px;
	top: 60px;
	-webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.pic5{
	left: 130px;
    top: 240px;
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.pic6{
	left: 320px;
    top: 240px;
	-webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
	transform: rotate(20deg);
}
.pic7{
	left: 520px;
	top: 240px;
	-webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
}
.pic8{
	left: 140px;
    top: 420px;
	-webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
	transform: rotate(20deg);
}
.pic9{
	left: 330px;
    top: 420px;
	-webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
	transform: rotate(10deg);
}
.pic10{
	left: 525px;
    top: 420px;
	-webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

　　此时的显示结果为，当鼠标移动上去的时候，图片会回到之前的位置，并且变为原来的1.5倍

二、css3曲线阴影

　　html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3中的曲线阴影效果</title>
		<link rel="stylesheet" type="text/css" href="css/test.css" />
	</head>

	<body>
		<div class="demo sty">
			<h1>曲线阴影效果</h1>
		</div>
		<ul class="box">
			<li><img src="data:images/2.jpg" /></li>
			<li><img src="data:images/4.jpg" /></li>
			<li><img src="data:images/5.jpg" /></li>
		</ul>
	</body>

</html>

　　css部分：

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
.demo{
	width: 980px;
    height: 200px;
    margin: 50px auto;
    line-height: 200px;
    font-size: 24px;
    text-align: center;
    background-color: #fff;
}
.sty{
	position: relative;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3),
				0 0 40px rgba(0,0,0,0.1) inset;
	border-radius: 10px;
}

.box{
	width: 980px;
    height: 300px;
    margin: 0 auto;
}
.box li img{
	display: block;
	width: 290px;
	height: 200px;
	border-radius: 8px;
}
.box li{
    position: relative;
    float: left;
    width: 290px;
	height: 200px;
    background-color: #fff;
    padding: 5px;
    margin-right: 25px;
    box-shadow: 0 0px 4px rgba(0,0,0,0.3) ,
    			0 0 60px rgba(0,0,0,0.1) inset;
    border-radius: 8px;
}

　　此时的效果为如下图：（只是简单的增加了圆角和一点阴影）

　　学完了css3中的变形和：before和：after，我们还可以增添如下代码：

//不满足之前的效果,我们还可以通过:before或是:after来增添效果
.sty:after , .sty:before{
	position: absolute;
		content: '';
		top: 50%;
		bottom: -1px;
		left: 10px;
		right: 10px;
		background:#fff;
		z-index: -1;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.box li:before{
	position: absolute;
	content: '';
	width: 90%;
	height: 80%;
	left: 18px;
	bottom: 11px;
	z-index: -2;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	transform: skew(-12deg) rotate(-5deg);
}
.box li:after{
	position: absolute;
	content: '';
	width: 90%;
	height: 80%;
	left: 18px;
	bottom: 11px;
	z-index: -2;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	transform: skew(12deg) rotate(5deg);
}

最终显示结果为：

css3照片墙+曲线阴影的更多相关文章

  1. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  2. 【CSS3】---曲线阴影翘边阴影

    效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...

  3. css3 曲线阴影，翘边阴影

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  5. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

  6. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  7. CSS3实现带阴影的弹球

    实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  9. CSS3的文字阴影—text-shadow

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性可以有两个作用,产生阴影和模糊 ...

随机推荐

  1. 美团在Redis上踩过的一些坑-目录（本人非美团）（转）

    来自:http://carlosfu.iteye.com/blog/2254154 分为5个部分:    一.周期性出现connect timeout    二.redis bgrewriteaof问 ...

  2. “Adobe Flash Player因过期而遭到阻止”的解决办法

    谷歌浏览器总是提示“Adobe Flash Player因过期而遭到阻止”,然后点进去,又更新不了,因为伟大的TC已经把谷歌屏蔽了. 解决办法就是到flash官网更新到最新的Flash https:/ ...

  3. 推荐--《Android深入浅出》

    基本信息 书名:Android深入浅出 作者:张旸 著 页数: 661 出版社: 机械工业出版社; 第1版 (2014年4月17日) 语种: 简体中文 ASIN: B00JR3P8X0 品牌: 北京华 ...

  4. WCF 数据服务 4.5

    .NET Framework 4.5 其他版本 WCF 数据服务(以前称为"ADO.NET Data Services")是 .NET Framework 的一个组件.可以使用此组 ...

  5. 在java项目中使用log4j的实例

    测试log4j的项目结构 Log4j.properties的路径为    src/config/log4j Log4j.properties文件的内容 下面定义日志输出级别是 INFO,并且配置了2个 ...

  6. 构造函数和:this()的应用

    一.构造函数和:this()的应用 //本实例演示构造函数和:this()的应用 public class ClsA { public string A{set;get;} public string ...

  7. ArcGIS Server API for JavaScript调用错误：已阻止跨源请求：同源策略禁止读取位于......

    已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...

  8. 卖萌的极致！脸部捕捉软件FaceRig让你化身萌宠

    FaceRig是一款以摄像头为跟踪设备捕捉用户脸部动作并转化为数据套用在其他动画模型上的一款软件,能够应用于一些日常的视频社交软件或网站,比如视频通话软件Skype和直播网站Twitch.FaceRi ...

  9. 【Cocos2d-Js基础教学（7）界面UI更新方法（会用到第三方类库）】

    我们游戏中会遇到很多UI更新的时候,大部分时候我们会remove该节点,再重新绘制的方法来进行UI更新. 但是这种更新效率并不高,这里我推荐大家一个第三方的库,来通过注册更新的方式来对UI进行更新管理 ...

  10. win8 IIS

    IIS打开页面报500错误 aspnet_regiis.exe -i 报 “此操作系统版本不支持此选项” 决解方法: 控制面板 - 程序和功能 - 启动或关闭windows功能 - Internet ...