CSS3实现照片墙效果

HTML5&CSS3 Alan 10年前 (2014-11-16) 4335次浏览 0个评论 扫描二维码

HTML5和CSS3已经被谈论很久了,关于W3C等既得利益体的争论这里按下不表,下面通过简单的CSS3代码来实现一个酷炫的照片墙效果,可以用于制作家庭的生活照相册,也可以在追女孩子时适时小秀一把:)

整个代码中用到的主要有CSS3中的transform中的旋转(rotate),过渡(transition),阴影(box-shadow),同时通过position来进行位置的定位,z-index来控制显示的层次。

相关示例代码如下:

	img{
		padding:10px 10px 15px;
		background:#fff;
		border:1px solid #ddd;
		position:absolute;
		transition:0.5s;
		-webkit-transition:0.5s;
		-moz-transition:0.5s;
		z-index:0;
		top:50px;
		left:100px;
		-webkit-transform:rotate(20deg);
		-moz-transform:rotate(20deg);
		transform:rotate(20deg);
	}

	img:hover{
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		transform:rotate(0deg);
		box-shadow:5px 5px 10px #ccc;
		z-index:1;
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		transform:scale(1.2);
	}
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址