css3照片墙+曲线阴影

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3照片墙+曲线阴影相关的知识,希望对你有一定的参考价值。

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="images/1.jpg" />
			<img class="pic2" src="images/2.jpg" />
			<img class="pic3" src="images/3.jpg" />
			<img class="pic4" src="images/4.jpg" />
			<img class="pic5" src="images/5.jpg" />
			<img class="pic6" src="images/6.jpg" />
			<img class="pic7" src="images/7.jpg" />
			<img class="pic8" src="images/8.jpg" />
			<img class="pic9" src="images/9.jpg" />
			<img class="pic10" src="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="images/2.jpg" /></li>
			<li><img src="images/4.jpg" /></li>
			<li><img src="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照片墙+曲线阴影的主要内容,如果未能解决你的问题,请参考以下文章

CSS3制作漂亮的照片墙

javascript加CSS3做不一样的3D拖拽照片墙

我用css3为好友胡歌的宝宝做了一个动画照片墙

css3 曲线阴影,翘边阴影

如何使用div拼接头像,生成心形照片墙?

css3中设置的img:hover不起作用