照片墙

来源:互联网 发布:剑灵人族捏脸数据下载 编辑:程序博客网 时间:2024/04/28 08:52

图片斜放,鼠标移上时,摆正并放大1.2倍

<style>
.container{
    margin:60px auto;     //主体居中
    position:relative;
}

.container img{
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;    //设置过渡参数
    position:absolute;
    z-index:1;
}

.container img:hover{
    -webkit-transform:rotate(0deg) scale(1.20);
    -moz-transform:rotate(0deg) scale(1.20);
    transform:rotate(0deg) scale(1.20);   //鼠标移上时,转换效果
    z-index:2;
}

.pic1{
    left: 400px;
    top: 0;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);    //原始转换效果
}

.pic2{
    top: 0;
    left: 600px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

</style>

<body>
    <div class="container">
        <img class="pic pic1" src="images/mm1.jpg">
        <img class="pic pic2" src="images/mm2.jpg">
    </div>
</body>

0 0
原创粉丝点击