css实现邮票边框折角照片墙效果代码
代码语言:html
所属分类:画廊相册
代码描述:css实现邮票边框折角照片墙效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{
padding:0px;
margin:0px;
}
body{
background:#f5f5f5;
}
h1{
color:#2F3238;
text-align:center;
}
.content_photo{
margin:60px auto;
position:relative;
width:1000px;
}
img{
position:absolute;
padding:10px;
background:#fff;
border: none;
border-radius:6px;
width:240px;
height:160px;
/*position:absolute;*/
-webkit-transition:1s;
z-index:1;
background: radial-gradient( transparent 0px, transparent 4px, white 4px, white );
background-size: 20px 20px;
background-position: -10px -10px;
}
img:hover{
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.5);
-webkit-box-shadow:10px 10px 15px #ccc;
z-index:999;
border-bottom-right-radius:140px 30px;
}
.img01{
top:70px;
left:350px;
transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
.img02{
top:-10px;
left:530px;
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
.img03{
top:-30px;
left:30px;
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
.img04{
top:130px;
left:60px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.img05{
top:30px;
left:180px;
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
}
.img06{
top:160px;
left:560px;
-o-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
}
.img07{
top:260px;
left:560px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.img08{
top:250px;
left:50px;
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0