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