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

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

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年情人节网页表白动画

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34989.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注