练习四：图片折叠效果 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *,*::before,*::after {
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            }
            #container {
                width: 186px;
                margin: 48px auto;
            }
            #img-group {
                position: relative;
            }
            .photo {
                width: 186px;
                height: 128px;
                border: 4px solid #fff;
                border-radius: 8px;
                position: absolute;
                transform-origin: center 250%;
                cursor: pointer;
                transition: all 1s;
                z-index: 1;
            }
            #photo1 {
                background-image: url("2.jpg");
                background-size: cover;
                background-position: center;
                transform: rotate(-8deg);
            }
            #photo2 {
                background-image: url("smile.jpeg");
                background-size: cover;
                background-position: center;
                transform: rotate(8deg);
            }
            #photo3 {
                background-image: url("clock.jpg");
                background-size: cover;
                background-position: center;
            }
            .img-group:hover #photo1 {
                transform: rotate(-35deg);
            }
            .img-group:hover #photo2 {
                transform: rotate(35deg);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="img-group">
                <div id="photo1" class="photo"></div>
                <div id="photo2" class="photo"></div>
                <div id="photo3" class="photo"></div>
            </div>
        </div>
    </body>
</html>

 

posted on 2018-12-26 11:43  myworldworld  阅读(94)  评论(0)    收藏  举报

导航