马上要毕业了，闲来无事想着做一个电子毕业纪念册。话不多说我们搞起来。

项目构成

项目名称：JUST LOVE U

项目构成：JUST LOVE U

JUST LOVE U具体结构

  • css
    • style.css
    • jlu.css
  • js
    • script.js
    • jlu.js
  • video
    • jlu.mp3
  • jlu.html
  • index.html

代码实现

index.html

index.html是首页，放置一个按钮进入毕业纪念册，用打字机输入你想说的话。

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>毕业快乐!!!</title>
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>
<div class="typewriter">
    <h1>Hi,xxx,这里有一封毕业告别信待你查收哦。</h1>
</div>
<button class="bubbly-button" onclick="window.location.href='skystar.html'">电子毕业告别册</button>
<script  src="./js/script.js"></script>

</body>
<style>
    /* GLOBAL STYLES */
    body {
        /*background: #ebcc94;*/
        padding-top: 5em;
        display: flex;
        justify-content: center;
        margin:0px;
        background-size:100% 100%;
        background-attachment: fixed;
        background-image: url('https://cdn.staticaly.com/gh/Little-Ang/picx-images-hosting@master/33_1920x1080.4jt80otdwlc0.webp');
    }

    /* DEMO-SPECIFIC STYLES */
    .typewriter h1 {
        color: #333;
        font-family: monospace;
        overflow: hidden; /* Ensures the content is not revealed until the animation */
        border-right: .15em solid orange; /* The typwriter cursor */
        white-space: nowrap; /* Keeps the content on a single line */
        margin: 0 auto; /* Gives that scrolling effect as the typing happens */
        letter-spacing: .15em; /* Adjust as needed */
        animation:
                typing 3.5s steps(30, end),
                blink-caret .5s step-end infinite;
    }

    /* The typing effect */
    @keyframes typing {
        from { width: 0 }
        to { width: 100% }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to { border-color: transparent }
        50% { border-color: orange }
    }
</style>

</html>

style.css

style.css用来实现按钮的效果

body {
  font-size: 16px;
  font-family: "Helvetica", "Arial", sans-serif;
  text-align: center;
  background-color: #ebcc94;
}

.bubbly-button {
  font-family: "Helvetica", "Arial", sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ff0081;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
  transform: scale(0.9);
  background-color: #e60074;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

script.js

script.js 实现按钮的效果

var animateButton = function(e) {

    e.preventDefault;
    //reset animation
    e.target.classList.remove('animate');

    e.target.classList.add('animate');
    setTimeout(function(){
        e.target.classList.remove('animate');
    },700);
};

var bubblyButtons = document.getElementsByClassName("bubbly-button");

for (var i = 0; i < bubblyButtons.length; i++) {
    bubblyButtons[i].addEventListener('click', animateButton, false);
}

jlu.html

点击按钮跳转到核心内容页面

本页面的祝福语环绕的效果参考B站

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>毕业快乐!!!</title>
    <style>
      #videofilm {
        width: 100%;
        height: auto;
        position: fixed;
        z-index: -1;
      }
      h1{
        font-size: 36px;
        color: #755ee7;
        font-family: '楷体';
      }

    </style>
    <link rel="stylesheet" href="css/jlu.css">
  </head>
  <body class="bb" id="dv" style="margin:0;background-size:100% 100%;background-attachment:fixed;">
    <div class="textone">
      <h1>祝福语</h1>
    </div>
    <div class="texttwo">
      <h1>祝福语</h1>
    </div>
    <div class="textthree">
      <h1>祝福语</h1>
    </div>
    <audio src="video/jlu.mp3" autoplay="autoplay"></audio>
    
    <div class="container"></div>
    <script src="js/jlu.js">
      window.onload = function() {
        document.querySelector('video').muted = false;
      };
    </script>
    <script>
      var arrImg = ['1.jpg','2.jpg','3.jpg',
      ] // 背景url地址数组，更加多自己增加这个数组项
              , l = arrImg.length, index = 0;
      function changeImg(init) {
        if (init !== true) { index++; if (index >= l) index = 0; }
        document.getElementById('dv').style.backgroundImage = 'url(' + arrImg[index] + ')'
      }
      changeImg(true);
      setInterval(function () { changeImg()}, 6300)// 6.3s换一次背景
    </script>
  </body>

</html>

jlu.css

环绕字体的效果实现

*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
perspective: 888px;
}
.bb {
background-size: cover;
transition: all 1.5s ease;
}

.texttwo {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
}
.textone {
position: absolute;
left: 50%;
top: 40%;
transform: translateX(-50%);
}
.textthree {
position: absolute;
left: 50%;
top: 60%;
transform: translateX(-50%);
}
:root {
--margin-top: 0;
--margin-left: 0;
--animation-duration: 0s;
--animation-delay: 0s;
}
div {
transform-style: preserve-3d;
}
.word-box,
.word-box .word{
position: absolute;
animation: rotY 0s linear infinite;
animation-duration: var(--animation-duration);
animation-delay: var(--animation-delay);
}
.word-box{
margin-top: var(--margin-top);
}
.word-box .word{
margin-left: var(--margin-left);
}
.word-box .word {
animation-duration: reverse;
}
@keyframes rotY {
to{
transform: rotateY(360deg);
}

}

jlu.js

实现环绕字体的生成

// poem
var words=[
    '温柔半两 从容一生',
    '种自己的花',
    '爱自己的宇宙',
    '我们的征途是星辰大海',
    '风催着我们出发',
    '一直走在开满鲜花的路上',
    '浪漫不死',
    '平安喜乐',
    '做一朵奔涌的浪花',
    '不舍爱与自由',
    '愿为江水 与君重逢',
    '熬过无人问津的日子才有诗和远方',
    '以渺小启程 以伟大结束',
    '好想回到那个夏天',
    '所有的努力最终都会绕个大圈回报你',
    '又到凤凰花朵开放的时候',
    '时光的河入海流',
    '做最温柔的梦',
    '永远轻盈 永远滚烫',
    '开始的开始 我们都是孩子',
    '我只想要拉住流年',
    '好好的说声再见',
    '向前跑 迎着冷眼和嘲笑',
    '继续跑 带着赤子的骄傲',
    '我的未来不是梦',
    '我的心跟着希望在动',
    '夜空中最亮的星照亮我前行',
    '被风吹过的夏天',
    '从前初识这世间',
    '措不及防闯入你的笑颜',
    '我曾难自拔于世界之大',
    '也沉溺于其中梦话',
    '画中的你低着头说话',
    '不得真假 不做挣扎',
    '心之所动就随缘去吧',
    '逆着光行走',
    '任风吹雨打',
    '我曾经跨过山和大海',
    '海上的晚霞像年少的画',
    '我希望许过的愿望一路生花',
    '护送那时的梦抵挡过风沙',
    '指尖的樱花如诗写谁的韶华',
    '疯狂的热爱夹带着文雅',
    '最初的梦想绝对会到达',
    '最初的梦想紧握在手上',
    '平平淡淡从从容容才是真',
    '点点滴滴如春风化做雨',
    '抬头遇见满眼温柔',
    '幸运总会与你不期而遇',
    '未曾谋面的也终将会相遇',
    '众生平庸 你是人间星光',
    '一切都会好的 城南的花都开了',
    '此去经年不曾悔',
    '后会无期终有期',
    '我们跃入人海 沉浮于各自的风雨灿烂',
    '希望我们说了再见以后 真的还能再见',
    '人生若只如初见',
    '盛夏总是让人怀念',
    '人生虽有离别日',
    '山水应有相逢时',
    '愿万事顺遂',
    '青春本就是马不停蹄的错过和相遇',
    '愿有前程可奔赴',
    '亦有岁月共回首',
    '相聚别离 都是刚刚好',
    '再见 为了再见',
    '人生何处不相逢',
    '有朋自远方来 又赴远方',
    '前路皆平川',
    '前途歌尽欢',
    '历尽千帆 归来仍少年',
    '桐花万里丹山路',
    '雏凤清于老凤声',
    '我觉君非池中物',
    '明年此日青云去',
    '却笑人间举子忙',
    '又携书剑路茫茫',
    '人生如逆旅 我亦是行人',
    '且将新火试新茶，诗酒趁年华',
    '此去提衡霄汉上',
    '鹏抟鲲运更论程',
    '会当凌绝顶 一览众山小',
    '前路漫漫亦灿灿',
    '前途似海',
    '来日方长',
    '悬崖亦开花',
    '顶峰相见',
    '心之所向',
    '莫忘少年凌云志',
    '曾许人间第一流',
    '我们终将在另一片天空下相遇',
    '乘风破浪会有时',
    '直挂云帆济沧海',
    '追风赶月莫停留',
    '平芜尽处是春山',
    '轻舟已过万重山',
    '桥都坚固 隧道都光明',
    '以梦为马 不负韶华',
    '时光不负有心人',
    '滚烫的青春里最沸腾的一章',
    '满船星梦压星河'
];
function randomNum(min,max){
    var num = (Math.random()*(max-min+1)+min).toFixed(2); 
    return num;
}
function init(){
    let container = document.querySelector('.container');
    let f = document.createDocumentFragment();
    words.forEach(w=>{
    let word_box = document.createElement('div');
    let word = document.createElement('div');
        word.innerText = w;
        word.classList.add('word');
        word.style.color = '#f7f2f2';
        word.style.fontFamily = '楷体';
        word.style.fontSize = '15px'
        word_box.classList.add('word-box');
        word_box.style.setProperty("--margin-top",randomNum(-40,20)+'vh');
        word_box.style.setProperty("--margin-left",randomNum(6,45)+'vw');
        word_box.style.setProperty("--animation-duration",randomNum(18,25)+'s');
        word_box.style.setProperty("--animation-delay",randomNum(-20,0)+'s');
        
        word_box.appendChild(word);
        f.appendChild(word_box);


    })
    container.appendChild(f);
}
window.addEventListener('load',init);
      let textone = document.querySelector('.textone').querySelector('h1');
      let texttwo = document.querySelector('.texttwo').querySelector('h1');
      let textthree = document.querySelector('.textthree').querySelector('h1');

      setTimeout(function(){
          textone.innerHTML = '祝福语';
          textone.style.color = '#22c098';
          textone.style.fontFamily = '楷体'
          texttwo.style.color = '#755ee7';
          texttwo.style.fontFamily = '楷体'
          textthree.style.color = '#755ee7';
          textthree.style.fontFamily = '楷体'
      },40000)
      setTimeout(function(){
          textone.style.color = '#22c098';
          textone.style.fontFamily = '楷体'
          texttwo.style.color = '#22c098';
          texttwo.style.fontFamily = '楷体'
          textthree.style.color = '#755ee7';
          textthree.style.fontFamily = '楷体'
          texttwo.innerHTML = '祝福语';
    },90000)
setTimeout(function(){
    textone.style.color = '#22c098';
    textone.style.fontFamily = '楷体'
    texttwo.style.color = '#22c098';
    texttwo.style.fontFamily = '楷体'
    textthree.style.color = '#f9972f';
    textthree.style.fontFamily = '楷体';
    textthree.style.fontSize = '56px';
    textthree.innerHTML = '祝福语';
},142000)

项目上线部署

我使用的是阿里云，因为本人比较熟悉后端，项目采用javaweb形式部署

nginx配置

server {
    listen 80;



    server_name  域名;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    location / {
        proxy_pass http://你的服务器:端口号/;   
    }
}

效果展示

再见吉林大学，长春市朝阳区前进大街2699号的故事到此就要结束了，祝我们大家一直走在开满鲜花的路上！

祝你永远快乐
最后更新于 2023-06-23
啥也没有呀