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

深藏阁楼爱情的钟 2023-09-24 13:31 45阅读 0赞

**项目结构**  
![在这里插入图片描述][cb61d34aa76f433e995a250768348bf4.png]  
**.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

![在这里插入图片描述][73867ff8e233409b966c193a352d0f2c.png]  
**video/skystar**

视频暂无法上传

**js/skystar.js**

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

[cb61d34aa76f433e995a250768348bf4.png]: https://img-blog.csdnimg.cn/cb61d34aa76f433e995a250768348bf4.png
[73867ff8e233409b966c193a352d0f2c.png]: https://img-blog.csdnimg.cn/73867ff8e233409b966c193a352d0f2c.png