HTML情人节代码表白，情人节网页动画表白，超浪漫的表白动画代码，2023情人节网页表白动画

最新推荐文章于 2023-08-03 21:50:19 发布

程序员柳

最新推荐文章于 2023-08-03 21:50:19 发布

阅读量354

点赞数

文章标签： html 前端动画

本文链接：https://blog.csdn.net/2301_76484015/article/details/129017106

版权

HTML情人节代码表白，情人节网页动画表白，超浪漫的表白动画代码，2023情人节网页表白动画

在这里插入图片描述

index.html


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <div id="content">
        <ul class="content_wrap">
            <!--第一个画面-->
            <li>
                <!--背景-->
                <div class="a_bg">
                    <div class="a_bg_top"></div>
                    <div class="a_bg_middle"></div>
                    <div class="a_bg_bottom"></div>
                </div>
                <!--太阳-->
                <div id="sun"></div>
                <!-- 云 -->
                <div class="cloud_wrap">
                    <div id="cloud1"></div>
                    <div id="cloud2"></div>
                </div>
            </li>
            <!--第二个画面-->
            <li>
                <!--背景图-->
                <div class="b_bg"></div>
                <!-- 商店 -->
                <div class="shop">
                    <div class="door">
                        <div class="door_left"></div>
                        <div class="door_right"></div>
                    </div>
                    <!-- 灯 -->
                    <div class="lamp"></div>
                </div>
                <!-- 鸟 -->
                <div class="bird"></div>
            </li>
            <!--第三个画面-->
            <li>
                <div class="c_bg_top"></div>
                <div class="c_bg_middle"></div>
                <div class="c_bg_bottom"></div>
                <!-- 小女孩 -->
                <div class="girl"></div>
                <!-- 水波 -->
                <div class="bridge-bottom">
                    <ul class="waters">
                        <li class="water1"></li>
                        <li class="water2"></li>
                        <li class="water3"></li>
                        <li class="water4"></li>
                    </ul>
                </div>
                <!-- 星星 -->
                <ul class="stars">
                    <li class="star1"></li>
                    <li class="star2"></li>
                    <li class="star3"></li>
                    <li class="star4"></li>
                    <li class="star5"></li>
                    <li class="star6"></li>
                </ul>
            </li>
        </ul>
        <div id="boy" class="boy_wrap"></div>
        <!-- 飘花 -->
        <div id="flower_wrap"></div>
        <div class="button">
            <button>点击开始</button>
        </div>
    </div>
</body>
</html>

完整代码下载地址：2023年情人节网页表白动画