HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？ 快来制作高端大气上档次的表白网页吧

尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。

表白作品介绍


1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)


文章目录


1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)_js

二、代码目录


HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)_js_02

三、代码实现 (教程)


html(部分)

音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹 更换即可~ 戳我>>>免费下载MP3

注意: 下载后的音乐文件需要修改名称 和mp3文件夹里的 的名字保持一致即可


     <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>

css (部分)


.a_background {
    width: 100%;
    height: 100%;
    position: absolute
}

.a_background_top {
    width: 100%;
    height: 71.6%;
    background-image: url("../images/55addf6900019d8f14410645.png");
    background-size: 100% 100%
}

.a_background_middle {
    width: 100%;
    height: 13.1%;
    background-image: url("../images/55addf800001ff2e14410118.png");
    background-size: 100% 100%
}

.a_background_botton {
    width: 100%;
    height: 15.3%;
    background-image: url("../images/55addfcb000189b314410138.png");
    background-size: 100% 100%
}

.cloud {
    z-index: 2;
    position: absolute
}

.cloud1 {
    width: 100%;
    height: 30%;
    left: -5%;
    top: 15%;
    background: url("../images/55addfde0001aec501810101.png") no-repeat;
    -webkit-animation-name: smallCloud;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration: infinite;
    -moz-animation-name: smallCloud;
    -moz-animation-duration: 30s;
    -moz-animation-iteration: infinite
}

.cloud2 {
    width: 100%;
    height: 100%;
    right: -5%;
    background: url("../images/55addff500016df503010140.png") no-repeat;
    -webkit-animation-name: largeCloud;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration: infinite;
    -moz-animation-name: largeCloud;
    -moz-animation-duration: 50s;
    -moz-animation-iteration: infinite
}

@-webkit-keyframes smallCloud {
    0% {
        left: -5%
    }
    100% {
        left: 100%
    }
}

@-moz-keyframes smallCloud {
    0% {
        left: -5%
    }
    100% {
        left: 100%
    }
}

@-webkit-keyframes largeCloud {
    0% {
        right: -5%
    }
    100% {
        right: 100%
    }
}

@-moz-keyframes largeCloud {
    0% {
        right: -5%
    }
    100% {
        right: 100%
    }
}

#sun {
    background: url("../images/55ade004000106c202010201.png") no-repeat;
    position: absolute;
    z-index: 1;
    top: -30px;
    height: 201px;
    width: 201px;
    right: 100px;
    -webkit-transform: rotate(45deg);
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-transform: rotate(45deg);
    -moz-animation-name: rotation;
    -moz-animation-duration: 60s;
    -moz-animation-iteration: 1;
    -moz-animation-fill-mode: forwards
}

@-webkit-keyframes rotation {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg)
    }
    100% {
        transform: translateX(-2000px) translateY(400px) rotate(70deg)
    }
}

@-moz-keyframes rotation {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg)
    }
    100% {
        transform: translateX(-2000px) translateY(400px) rotate(70deg)
    }
}

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)


web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)_web开发_03


五、源码获取


❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !

HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)_html_04