【闲趣】JavaScript练手项目：艳火

隐居的遮天恶鬼

于 2022-10-24 13:17:12 发布

阅读量443

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_43717839/article/details/127490515

版权

闲趣专栏收录该内容

8 篇文章 8 订阅

订阅专栏

项目结构
在这里插入图片描述
.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
             
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

css/skystar.css

*{
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    perspective: 1300px;
}
.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}
.textone {
    position: absolute;
    left: 50%;
    top: 40%;
    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);
    }
     
}

img/skystar2.jpg

在这里插入图片描述
video/skystar

视频暂无法上传

js/skystar.js

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 = '#BAABDA';
        word.style.fontFamily = '楷体';
        word.style.fontSize = '20px'
        word_box.classList.add('word-box');
        word_box.style.setProperty("--margin-top",randomNum(-40,20)+'vh');
        word_box.style.setProperty("--margin-left",randomNum(6,35)+'vw');
        word_box.style.setProperty("--animation-duration",randomNum(8,20)+'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 text = document.querySelector('.text').querySelector('h1');
      setTimeout(function(){
        textone.innerHTML = '艳火-Anpu';
          textone.style.color = '#E8F9FD';
          textone.style.fontFamily = '楷体'
          text.innerHTML = '';
      },28000)

skystar.html

<!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: #B1BCE6;
        font-family: '楷体';
      }
 
    </style>
    <link rel="stylesheet" href="css/skystar.css">
  </head>
  <body>
    <video id="videofilm" poster="img/skystar2.jpg" autoplay muted loop>
      <source src="video/skystar.mp4" type="video/mp4">
    </video>
    <div class="textone">
      <h1>我把红线折折剪剪</h1>
    </div>
    <div class="text">
      <h1>落入凡间镜重圆</h1>
    </div>
     
    <div class="container"></div>
    <script src="js/skystar.js"></script>
 
  </body>
</html>