a-letters
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>两个月总结</title>

  <link rel="stylesheet" href="CSS.css?v=3">

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/TweenMax.min.js"></script>
  <script type="text/javascript" src="js/canvas_bg.js?v=1.3"></script>
  <style>
    body,
    html {
      /* margin: 0;
      padding: 0; */
      /* overflow: hidden */
    }

    .svoiceIcon {
      animation-name: colorswitchs;
      animation-duration: 4s;
      /*动画时间*/
      animation-fill-mode: both;
      /*播放后的状态*/
      animation-iteration-count: infinite;
      /*动作循环的次数：infinite 无限循环*/
    }

    @keyframes colorswitchs {
      0% {
        color: #0087C9
      }

      20% {
        color: #EF4A53
      }

      40% {
        color: #804cfa
      }

      60% {
        color: #FFB463
      }

      80% {
        color: #33D5D4
      }

      100% {
        color: #0087C9
      }
    }

    .star {
      width: 100%;
      position: fixed;
      left: 0;
      top: 40vh;
      display: none;
      z-index: 9991
    }

    /*心跳开始 */
    .heart {
      width: 200px;
      height: 200px;
      background: #f00;
      position: relative;
      filter: drop-shadow(0px 0px 20px rgb(255, 20, 20));
      transform: rotate(45deg);
      margin: 20px auto;
    }

    .heart {
      animation-name: heartbeat;
      animation-duration: 1s;
      /*动画时间*/
      animation-fill-mode: both;
      /*播放后的状态*/
      animation-iteration-count: infinite;
      /*动作循环的次数：infinite 无限循环*/
    }

    .heart:before,
    .heart:after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      background: #f00;
      border-radius: 100px;
    }

    .heart:before {
      left: -100px;
    }

    .heart:after {
      left: 0;
      top: -100px;
    }

    @keyframes heartbeat {
      0% {
        transform: rotate(45deg) scale(0.8, 0.8);
        opacity: 1;
      }

      25% {
        transform: rotate(45deg) scale(1, 1);
        opacity: 0.8;
      }

      100% {
        transform: rotate(45deg) scale(0.8, 0.8);
        opacity: 1;
      }
    }

    /* 心跳结束 */
    .music {
      position: fixed;
      right: 4%;
      top: 2%;
      width: 120px;
      height: 120px;
      z-index: 999999;
      opacity: 0.5
    }

    .musicRotate {
      animation-name: musicrotate;
      animation-duration: 3s;
      /*动画时间*/
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
      /* Safari 和 Chrome */
      animation-fill-mode: both;
      /*播放后的状态*/
      animation-iteration-count: infinite;
      /*动作循环的次数：infinite 无限循环*/
    }

    @keyframes musicrotate {
      0% {
        -webkit-transform: rotate(0deg);
      }

      25% {
        -webkit-transform: rotate(90deg);
      }

      50% {
        -webkit-transform: rotate(180deg);
      }

      75% {
        -webkit-transform: rotate(270deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }

    }

    #c {
      height: 6000px;
    }

    .letter-border {
      width: 100%;
      /* position: absolute; */
      /* top: 36px; */
      height: 100%;
      background: #fbfaf5;
      /* text-align: center; */


    }

    .letter-box {
      z-index: 1000000;
      position: relative;
      width: 80%;
      margin-top: 52px;
      margin-left: 50%;
      transform: translateX(-50%);
      padding: 8px;
      box-sizing: border-box;
      background: linear-gradient(45deg, #f25953 12.5%, #fbfaf5 12.5%, #fbfaf5 25%, #5590d6 25%, #5590d6 37.5%, #fbfaf5 37.5%, #fbfaf5 50%, #f25953 50%, #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%);
      background-size: 70px 70px;
    }

    .zhong {
      margin-left: 50%;
      transform: translateX(-50%);
      width: 89%;
      font-size: 36px;
    }
  </style>
</head>

<body id="bo" onclick="autoplay()">
  <audio id="music" src="video/2577088121.mp3" autoplay loop="true" autostart></audio>

  <canvas id="c"
    style="position: absolute;z-index: -1;text-align: center;height:6800px;top:0;left:0;width:1000px"></canvas>


  <div class="star">
    <div class="heart animated"></div>
  </div>


  <div class="letter-box">
    <div class="letter-border">
      <div class="zhong">
        <p>
          <br>凌晨五点
          <br>电话那边是熟睡的你
          <br>电话这边是幸福的我
          <br>截至今日
          <br>小张你已出现在我生命八十日夜
          <br>我用了七个小时的时间匆匆走过了这八十天
          <br>写下的文字一遍一遍的推翻
          <br>追求着这份神圣
          <br>我问自己一份完美的总结是什么
          <br>我不断推敲，不断琢磨
          <br>写了又删，删了又写
          <br>百思不得其解
          <br>转头看一眼接通的电话
          <br>想着在那边熟睡的你
          <br>我似乎有了答案
          <br>你我之相依，共度秋去冬来，穿过时间缝隙，诠释片刻之永恒
          <br>我愿为你通宵达旦，你愿给我温暖陪伴
          <br>这不正是我们这八十天里最好的总结
          <br>于是
          <br>我便不再束缚
          <br>敞开心扉，畅谈感受
          <br>愿卿永乐，平安顺遂
          <br>初次相识多多关照—十月
          <br>你随秋而来，互道姓名，于是双蝎起舞，神秘而亲切。我们互道问候，谈及学业，并确定初心，共同努力，面向更好的自己。谈及爱好，吃饭睡觉，更有甚者便是夕阳，日落尤其温柔，人间尤其微妙，谈何微妙，万物之变悄无声息，花向阳生，树向养伸，我奔向你，你依附我。谈及感受，心疼三秒，少显礼貌，多不矜持，实际内心暗伤，早已心疼不已。谈及感情，约法三章，保持距离，不放狠话，及时分享，理性沟通。我曾告诫自己，不轻易动心，却为卿痴迷，数日辗转反侧，只因问清自己是否能负责，终获结论，卿于我万分值得，无可挑剔。那一月，秋是第二春，遇见你我三生有幸，我们嘘寒问暖，我们共度良宵，我们彼此了解，我们互相祝福，我们矜持中带有一丝浪漫，新鲜中带有万分契合，我所追求，浪漫与自由，在你身上完美呈现，爱意随秋风而起，卿踏风而来，深入我心。我们的十月，新鲜而美好，于我而言，我发现了无数让我心动的闪光点，我认为你就是上天赐给我的那个命中注定的人，我们越聊越深，我也越陷越深，少了初识那份冷静，伴随而来的是无尽的占有欲和醋意，我开始变得敏感，患得患失，多亏了宝贝的清醒，不然我们可能早已止步，谈及数遍，如果不是你的冷静，我也不会考虑好几个晚上，自然也就不会有现在的我们。十月之你我，分享了彼此的全世界，从学习到未来，从友情到亲情，从吃喝到玩乐，从星座到现实，从性格到人品，从画饼到努力，我们慢慢习惯了彼此，你无数次出现在我梦里，我也有幸进入过你的梦境。十月就在新鲜感和好感中顺利的度过了。
          <br>初次相爱多多包涵—十一月
          <br>思考甚久，不知如何形容十一月，爱意愈发浓烈，我们逐渐成为彼此的习惯和依赖，十一月于我而言收获极大，但其实整个十一月是在矛盾，坚守，妥协和理解中度过。这个月我们彼此发生过很多次能够让我们汲取教训的事。这一个月，我们的一些缺点暴露给了彼此，我们会有分歧，有挺多做的不好的地方，比如说我的敏感，患得患失，在比如说我太迫切想要一个身份，想要确定关系，想要让你身边的人都知道我，但我有很矛盾，因为我想要让你更加了解我一些在下决定，但我依然选择坚守，我知道，我付出了努力，老天不会负我，你也不会。而我们在一些事情上产生分歧，你不想说话，我也会努力跟你讨论清楚，我们为了彼此，为了这段感情，都做出了妥协和理解。也正是这个月，无数次的辗转反侧，数次落泪，数次沟通，慢慢的我们对彼此更加熟悉，也更加了解对方的喜好和习惯，我们都在慢慢的一点点的改变自己，让我对你的那份好感逐渐转化成了爱意，我知道了我对你的爱，可我并不知道该怎么爱你，你也不知道怎么爱我更合适，所以我们一直在沟通，彼此更加了解如何去爱对方，最终，我们克服冲冲困难，伴随着着很多的情绪度过了十一月。初次相爱，多多包涵，正是我们十一月最真实的写照，总的来说，很感谢宝贝的陪伴和理解，我们在很多事情上选择了理解和沟通，十一月的我学会了忍耐，学会了沟通，学会了理解，学会了自己画的饼要努力实现，还有我们性格上的互补，让我们的十一月有条不紊的度过了。
          <br>适应不同生活状态，走向更好—十二月
          <br>十二月截止到今天，也很快要过去了，这个月其实是我最开心的一个月，虽然我们经历了比较大的情绪波动，但我真真切切的感受到你对我的爱了，我真真切切的感受了你的对我的在乎，这个月，我们更加的熟悉，但随着你生活状态的改变，我们需要适应不同的生活状态下的我们，从在学校，到在家，再到生病，在到今天，这个月过的尤其快，因为这个月我对你的爱意达到了顶峰，跟你在一起的每一天，时光飞逝，你逐渐从一种习惯变成了我的全世界，宝宝，这个月我学会了爱，学会了如何爱，学会了豁达，学会了把感情当做一种生活，学会了照顾你感受，学会了体贴和关心，学会了凡事要考虑全面。这个月我知道我们已经进入平淡期了，通过前几天的事情我也深刻的体会到了新鲜感的重要性，这个月对我来说，就是一个学习如果去爱的最快速度一个月，当然了，无论哪个月，都离不开感谢，感谢宝贝继续坚定的选择我。我愿执子之手，与子偕老。相比于十月的新鲜，十一月的形成习惯，十二月的我更加的冷静，更加的豁达，更加的爱你，爱你到了极点，我知道感情对我来说是什么，我为什么要维持这段感情，我知道你对我有多重要，我知道，我的全世界是什么，该是什么，我知道我要如何努力，努力为我们创造一个美好的未来，我知道，我爱你，非常爱，宝贝，锁死我，不要弄丢我，我们的路很长很长，我会陪你一起走，我爱你宝贝，十二月有你，是我的荣幸。
          <br>从十月的新鲜，到十一月的矛盾，再到十二月坚定的决心与爱意，我们经历了很多，尽管时间不长，展望未来，我有十足的信心，希望我的宝贝可以信任我，信任我可以带你一起进步，也要信任你自己，信任你自己的选择，我爱你，宝贝，等着我，我一直在，永远在。

        </p>
      </div>

    </div>
  </div>

  <script type="application/javascript" src="js/main.js"></script>
  <script>
    // document.body.addEventListener('touchmove', function (e) {
    //   e.preventDefault();
    // }, { passive: false });  //passive 参数不能省略，用来兼容ios和android
    function star() {
      $('.star').fadeIn();
      setTimeout(function () {
        $('.star').fadeOut()
      }, 1000)
    }

    function playMusic(obj) {
      var player = $("#player")[0]; /*jquery对象转换成js对象*/
      if (player.paused) { /*如果已经暂停*/
        player.play(); /*播放*/
        $(obj).addClass('musicRotate');
        $(obj).attr('src', 'img/musicP.png')
      } else {
        player.pause();/*暂停*/
        $(obj).removeClass('musicRotate');
        $(obj).attr('src', 'img/musicS.png')
      }
    }
  </script>
  <script>
    var hearts = [];
    var canvas = document.getElementById('drawHeart');
    var music = document.getElementById('music')

    // 点击播放音乐

    document.getElementById("bo").onclick = function () {
      // console.log(music);
      if (music.paused) {
        // document.body.style.backgroundColor = '#bcebbd'
        // 播放音乐
        music.play()
      } else {
        // 暂停音乐
        music.pause()
        // document.body.style.backgroundColor = '#ffd1cd'
      }
    }


  </script>
</body>

</html>