CSS简单的交互动效

最新推荐文章于 2024-12-04 11:11:08 发布

hthththtt

最新推荐文章于 2024-12-04 11:11:08 发布

阅读量432

点赞数 1

分类专栏：前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/hthththtt/article/details/107919865

版权

## 简单的图片动效制作
		效果及源码如下：

在这里插入图片描述

源码：
1.HTML部分

<!--第一个-->
    <div class="container container1 ">
        <h3>
            <span>NICE</span> LILY
        </h3>
        <p>
            LILY LIKES TO PLAY WITH CRAYONS AND PENCILS
        </p>
    </div>
<!--第二个-->
    <div class="container container2">
        <div id="box">
            <h3>
                <span>CHARMING</span>
                ROXY
            </h3>
            <p>
                ROXY WAS MY BEST FRIEND.SHE'D CROSS ANY <br/>
                BORDER FOR ME.
            </p>
        </div>
    </div>
<!--第三个-->
    <div class="container container3">
        <div class="bg">
        <h3>
            <span>FREE</span>
            SARAH
        </h3>
        <div class="hr"></div>
        <p>
            SAEAH LIKES TO WATCH CLOUDS.SHE'S QUITE DEPRESSED.
        </p>
        </div>
    </div>
<!--第四个-->
    <div class="container container4">
        <div class="bg">
            <h3>
                <span>SILLY</span>
                CHICO
            </h3>
            <p>
                CHICO'S MAIN FEAR WAS <br/>
                MISSING THE MORNING BUS.
            </p>
            <div class="box">
            </div>
        </div>
    </div>
<!--第五个-->
    <div class="container container5">
        <div class="bg">
            <p>
                MILO WENT TO THE WOODS. <br/>
                HE TOOK A FUN RIDE AND <br/>
                NEVER CAME BACK.
            </p>
            <h3>
                <span>FAITHFUL</span>
                MILO
            </h3>
        </div>
    </div>
<!--第六个-->
    <div class="container container6">
        <div class="bg">
            <div class="box_big">
                <h3>
                    <span>CRAZY</span>
                    LAYLA
                </h3>
                <p>
                    When Layla appears she brings ao eternal summer <br/>
                    along
                </p>
            </div>
            <div class="box_small"></div>
        </div>
    </div>
<!--第七个-->
    <div class="container container7">
        <div class="bg">
            <h3>
                <span>WILD</span>
                ROMEO

最低0.47元/天解锁文章