图片动画汇总-响应式布局_媒体查询

视频教学：https://www.imooc.com/learn/473

CSS:

<style>

        body, figure, figcaption {

            margin: 0;

            padding: 0;

        }

        figure {

            position: relative;

            width: 33.33%;

            height: 350px;

            overflow: hidden;

            float: left;

        }

        figcaption {

            position: absolute;

            top: 0px;

            left: 0px;

            color: #fff;

            font-family: "微软雅黑";

        }

        figure img {

            opacity: 0.9;

            transition: all 0.35s;

        }

        figure figcaption p, h2, span, div {

            transition: all 0.35s;

        }

        @media screen and (min-width:1001px) {

            figure {

                width: 33.33%;

            }

        }

        @media screen and (max-width:600px) {

            figure {

                width: 100%;

            }

        }

        @media screen and (min-width:601px) and (max-width:1000px) {

            figure {

                width: 50%;

            }

        }

        .test1 {

            background: #000;

        }

            .test1 figcaption p {

                background: #fff;

                color: #333;

                margin: 5px;

                text-align: center;

                transform: translate(-120px,0px);

            }

                .test1 figcaption p:nth-of-type(1) {

                    transition-delay: 0.05s;

                }

                .test1 figcaption p:nth-of-type(2) {

                    transition-delay: 0.1s;

                }

                .test1 figcaption p:nth-of-type(3) {

                    transition-delay: 0.15s;

                }

            .test1 figcaption {

                padding: 20px;

            }

            .test1:hover figcaption p {

                transform: translate(0px,0px);

            }

            .test1:hover img {

                transform: translate(-20px,0px);

                opacity: 0.5;

            }

        .test2 {

            background: #000;

        }

            .test2 figcaption {

                width: 100%;

                height: 100%;

            }

                .test2 figcaption h2 {

                    margin-top: 15%;

                    margin-left: 15%;

                }

                .test2 figcaption p {

                    margin-left: 15%;

                    opacity: 0;

                    transform: translate(0px,20px);

                }

                .test2 figcaption div {

                    border: 2px solid #FFF;

                    width: 80%;

                    height: 80%;

                    position: absolute;

                    top: 10%;

                    left: 10%;

                    transform: translate(0px,-350px) rotate(0deg);

                }

            .test2:hover figcaption div {

                transform: translate(0px,0px) rotate(360deg);

            }

            .test2:hover img {

                opacity: 0.5;

            }

            .test2:hover figcaption p {

                opacity: 1;

                transform: translate(0px,0px);

            }

        .test3 {

            background: #000;

        }

            .test3 figcaption {

                top: 30%;

                left: 40%;

            }

            .test3:hover img {

                opacity: 0.5;

            }

            .test3 figcaption h2 {

                transform: skew(90deg);

            }

            .test3:hover figcaption h2 {

                transform: skew(0deg);

            }

            .test3 figcaption p {

                transform: skew(90deg);

                transition-delay: 0.2s;

            }

            .test3:hover figcaption p {

                transform: skew(0deg);

            }

        .test4 {

        background:#000;

        }

        .test4 figcaption {

        width:100%;

        height:100%;

        }

        .test4 figcaption div {

            border: 2px solid #FFF;

            width: 80%;

            height: 80%;

            position: absolute;

            top: 10%;

            left: 10%;

            transform:scale(1.5);

        }

       

            .test4 figcaption h2 {

            margin-top:10%;

            margin-left:15%;

            }

            .test4 figcaption p {

            margin-left:15%;

            }

                 .test4:hover figcaption div{

                transform:scale(1);

            }

     .test4:hover figcaption h2{

                transform:scale(0.8);

            }

       .test4:hover figcaption p{

                transform:scale(0.8);

            }

        .test4:hover img {

        transform:scale(1.1);

        opacity:0.5;

        }

    </style>

body:

<body>

    <figure class="test1">

        <img src="phto/051552412060.jpg" />

        <figcaption>

            <h2>图片标题</h2>

            <p>图片注解1</p>

            <p>图片注解2</p>

            <p>图片注解3</p>

        </figcaption>

    </figure>

    <figure class="test2">

        <img src="phto/73C58PIC8uq_1024.jpg" />

        <figcaption>

            <h2>图片标题</h2>

            <p>图片注解</p>

            <div></div>

        </figcaption>

    </figure>

    <figure class="test3">

 
4000
      <img src="phto/u=159389783,3102223341&fm=214&gp=0.jpg" />

        <figcaption>

            <h2>倾斜动画</h2>

            <p>图片倾斜动画注解</p>

        </figcaption>

    </figure>

    <figure class="test4">

        <img src="phto/29358PICQjG_1024.jpg" />

        <figcaption>

            <h2>图片缩放效果</h2>

            <p>图片注解</p>

            <div></div>

        </figcaption>

    </figure>

</body>