七夕情人节送花告白动画(HTML+CSS+JavaScript)

最新推荐文章于 2021-09-11 19:17:17 发布

@码出未来-web网页设计

最新推荐文章于 2021-09-11 19:17:17 发布

阅读量3.2k

点赞数 7

分类专栏： 520爱心告白程序员告白 520情人节文章标签：七夕情人节送花HTML动画 520情人节程序员告白html模板 web前端 css告白动画

本文链接：https://blog.csdn.net/ruan365392777/article/details/118081369

版权

520情人节同时被 3 个专栏收录

35 篇文章 12 订阅

订阅专栏

程序员告白

26 篇文章 8 订阅

订阅专栏

520爱心告白

8 篇文章 3 订阅

订阅专栏

七夕情人节送花告白动画(HTML+CSS+JavaScript)

HTML5七夕情人节送花动画是一款七夕情人节男士买花送给女士的动画短片，代码附带详细中文注释，供大家参考，方便使用。

文章目录

七夕情人节送花告白动画(HTML+CSS+JavaScript)
效果演示
代码目录
代码实现
做好的网页效果,如何通过发链接给别人看?
- 1.1解决部署上线~> 部署上线工具(永久免费使用)
- - 1.1部署流程
  - 1.2 哇~ 部署成功
前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
源码获取
更多表白源码

效果演示

在线演示
在这里插入图片描述

代码目录

在这里插入图片描述

代码实现

<!--
 * @Author: your name
 * @Date: 2021-06-21 10:23:23
 * @LastEditTime: 2021-06-21 10:24:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \HTML5七夕情人节送花动画\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>HTML5七夕情人节送花</title>

    <link rel="stylesheet" href="css/55c16d94000109f300000000.css" />
    <link rel="stylesheet" href="css/55c16dab0001286100000000.css" />
    <link rel="stylesheet" href="css/55c16dc00001fa1a00000000.css" />
    <link rel="stylesheet" href="css/55c16dda0001113100000000.css" />

    <script
      type="text/javascript"
      src="js/55ac9a860001a6c500000000.js"
    ></script>
    <script
      type="text/javascript"
      src="js/55ac9ea30001ace700000000.js"
    ></script>
    <script
      type="text/javascript"
      src="js/55c16c910001e21b00000000.js"
    ></script>
  </head>

  <body>
    <div id="content">
      <ul class="content-wrap">
        <!-- 第一副画面 -->
        <li>
          <!-- 背景图 -->
          <div class="a_background">
            <div class="a_background_top"></div>
            <div class="a_background_middle"></div>
            <div class="a_background_botton"></div>
          </div>
          <!-- 云 -->
          <div class="cloudArea">
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
          </div>
          <!-- 太阳 -->
          <div id="sun"></div>
        </li>
        <!-- 第二副画面 -->
        <li>
          <!-- 背景图 -->
          <div class="b_background"></div>
          <div class="b_background_preload"></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_background">
            <div class="c_background_top"></div>
            <div class="c_background_middle"></div>
            <div class="c_background_botton"></div>
          </div>
          <!-- 小女孩 -->
          <div class="girl"></div>
          <div class="bridge-bottom">
            <div class="water">
              <div id="water1" class="water_1"></div>
              <div id="water2" class="water_2"></div>
              <div id="water3" class="water_3"></div>
              <div id="water4" class="water_4"></div>
            </div>
          </div>
          <!-- 星星 -->
          <ul class="stars">
            <li class="stars1"></li>
            <li class="stars2"></li>
            <li class="stars3"></li>
            <li class="stars4"></li>
            <li class="stars5"></li>
            <li class="stars6"></li>
          </ul>
          <!-- 慕课网logo图 -->
          <div class="logo">祝天下有情人终成眷属</div>
        </li>
      </ul>
      <!-- 雪花 -->
      <div id="snowflake"></div>
      <!-- 小男孩 -->
      <div id="boy" class="charector"></div>
    </div>

    <div style="text-align: center"></div>
  </body>
</html>