H5+JS+CSS3实现七夕言情源码分享

CodeAE

随着互联网发展的如火如荼，尖端技术延伸到各个领域，互联网人才备受企业青睐。面向在校大学生、职场人士的IT在线教育风生水起，慕课网作为中国最大的IT实战学习平台，一直以精品课程、卓越的用户体验领航行业发展。其在线编程功能为用户提供了绝佳的实战操作环境，助力IT技能的迅速提升。
QQ截图20230302113229.jpg

以下为部分代码展示：

HTML代码：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>html5七夕情人节送花动画场景下载演示</title>

<link rel='stylesheet' href='css/aseoe-1.css' />
<link rel='stylesheet' href='css/aseoe-2.css' />
<link rel='stylesheet' href='css/aseoe-3.css' />
<link rel='stylesheet' href='css/aseoe-4.css' />

<script type="text/javascript" src="js/aseoe-1.js"></script>
<script type="text/javascript" src="js/aseoe-2.js"></script>
<script type="text/javascript" src="js/aseoe-3.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>
<!-- 代码 结束 -->
</body>
</html>

CSS样式：

/* CodeAE代码之家-为开发爱好者分享技巧！ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

body {
  -webkit-text-size-adjust: none;
  font-family: sans-serif
}

h1 {
  font-size: 33px;
  margin: 50px 0 15px;
  text-align: center;
  color: #212121
}

h2 {
  font-size: 14px;
  font-weight: bold;
  color: #3c3c3c;
  margin: 20px 10px 10px
}

small {
  margin: 0 10px 30px;
  display: block;
  font-size: 12px
}

a {
  margin: 0 0 0 10px;
  font-size: 12px;
  color: #3c3c3c
}

img {
  border: 0
}

ol, ul, li {
  list-style-type: none
}

html, body {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  perspective: 1000;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000
}

#content {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: absolute
}

.content-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%
}

.content-wrap > li {
  width: 100%;
  height: 100%;
  float: left;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative
}

.charector {
  position: absolute;
  left: -6%;
  top: 55%;
  position: absolute;
  width: 100%;
  height: 100%;
  width: 151px;
  height: 291px;
  -webkit-transform: 'translateX(0px)';
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  background: url(../images/55ade248000198ae10550582.png) -0px -291px no-repeat
}

.slowWalk {
  -webkit-animation-name: person-slow;
  -webkit-animation-duration: 950ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps(1, start);
  -moz-animation-name: person-slow;
  -moz-animation-duration: 950ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: steps(1, start)
}

.slowFlolerWalk {
  -webkit-animation-name: person-floler-slow;
  -webkit-animation-duration: 950ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: step-start;
  -moz-animation-name: person-floler-slow;
  -moz-animation-duration: 950ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: step-start
}

.pauseWalk {
  -webkit-animation-play-state: paused
}

.boyOriginal {
  background-position: -150px -0px
}

@-webkit-keyframes person-slow {
  0% {
    background-position: -0px -291px
  }
  25% {
    background-position: -602px -0px
  }
  50% {
    background-position: -302px -291px
  }
  75% {
    background-position: -151px -291px
  }
  100% {
    background-position: -0px -291px
  }
}

@-moz-keyframes person-slow {
  0% {
    background-position: -0px -291px
  }
  25% {
    background-position: -602px -0px
  }
  50% {
    background-position: -302px -291px
  }
  75% {
    background-position: -151px -291px
  }
  100% {
    background-position: -0px -291px
  }
}

@-webkit-keyframes person-floler-slow {
  0% {
    background-position: -453px -0px
  }
  25% {
    background-position: -904px -0px
  }
  50% {
    background-position: -451px -0px
  }
  75% {
    background-position: -753px -0px
  }
  100% {
    background-position: -300px -0px
  }
}

@-moz-keyframes person-floler-slow {
  0% {
    background-position: -453px -0px
  }
  25% {
    background-position: -904px -0px
  }
  50% {
    background-position: -451px -0px
  }
  75% {
    background-position: -753px -0px
  }
  100% {
    background-position: -300px -0px
  }
}

.boy-rotate {
  -webkit-animation-name: boy-rotate;
  -webkit-animation-duration: 850ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: step-start;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: boy-rotate;
  -moz-animation-duration: 850ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: step-start;
  -moz-animation-fill-mode: forwards
}

@-webkit-keyframes boy-rotate {
  0% {
    background-position: -603px -291px
  }
  16.7% {
    background-position: -150px -0px
  }
  33.4% {
    background-position: -453px -291px
  }
  50.1% {
    background-position: -0px -0px
  }
  66.8% {
    background-position: -903px -291px
  }
  83.5% {
    background-position: -753px -291px
  }
  100% {
    background-position: -603px -291px
  }
}

@-moz-keyframes boy-rotate {
  16.7% {
    background-position: -150px -0px
  }
  33.4% {
    background-position: -453px -291px
  }
  50.1% {
    background-position: -0px -0px
  }
  66.8% {
    background-position: -903px -291px
  }
  83.5% {
    background-position: -753px -291px
  }
  100% {
    background-position: -603px -291px
  }
}

.button {
  position: absolute;
  top: 82%
}

button {
  width: 80px;
  height: 50px
}

效果在线测试

需要完整源码请自行下载

H5+JS+CSS3实现七夕言情源码分享

相关帖子

如何加强网站安全防范

在线文字转语音PHP源码

PHP自动发卡系统源码,个人免签支付配安装使用教程

帝国cms汉语字典源码,PC移动端自适应整站源码,自带采集规则

给大家一款很不错的个人博客源码

分享一个小清新自适应宇航员404页面丢失网页模板

HTML实现爱心旋转代码

jQuery实时节气罗盘时钟代码

jQuery创意圆形罗盘时钟代码（二）

css3怎样设置子元素居中的方法

CodeAE LV9