前两天在将网站进行备案，女神节那天学校开展女神节活动，自己参与活动工作人员，组织学校女生参加活动，女神节前一天晚上改写了一下这个代码，现在分享一下

{callout color="#00ffff"}
使用步骤 : 下载解压，上传目录

接口地址就是 :

http://你的域名/api.php?name=对方名字&zf=祝福语录
{/callout}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title><?php echo $_GET['name'] ?>-女神节快乐</title>
 <style>
    @font-face {
        font-family: "GoldenBrick";
        src: url("http://www.xiaobaishegongku.site/ns/static/GoldenBrick.ttf");
        font-weight: normal;
        font-style: normal;
    }
    * {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    body {
        background-color: #000;
        background-image: url(http://www.xiaobaishegongku.site/ns/static/1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    h1{
        font-size: 106px;
        font-family: "GoldenBrick";
        margin: 200px auto;
        font-weight: 600;
        text-align: center;
        color: #fff;
        -webkit-animation:bounce 2s infinite;
    }
    @-webkit-keyframes bounce{
        0%,100%,20%,50%,80%{
            -webkit-transform:translateY(0);
        }40%{
            -webkit-transform:translateY(-30px);
        }60%{
            -webkit-transform:translateY(-15px);
        }
    }
    video {
        margin-top: 0;
        width: 100%;
    }
    .text{
        width: 90%;
        margin-left: 5%;
        margin-top: 40px;
        font-family: 'fangsong';
        display: inline-block;
        position: relative;
        font-size: 60px;
        height: 60px;
        line-height: 60px;
        color: rgb(245, 245, 245);
    }
    .name {
        font-family: 'fangsong';
        width: 84%;
        margin-left: 8%;
        margin-top: 150px;
        font-size: 60px;
        text-align: left;
        color: #fff;
    }
    .bei {
        height: 200px;
    }
 </style>
</head>
<body>
 <h1>Happy Goddess'Day </h1>
 <video controls="" autoplay="autoplay" loop="loop" id="video" x-webkit-airplay="true" webkit-playsinline="true">
   <source src="http://www.xiaobaishegongku.site/ns/static/1.mp4" type="video/mp4">
</video>
<h2 class="name"><?php echo $_GET['name'] ?>：</h2>
    <h2>
        <span class="text" ></span>
    </h2>
    <h2 class="bei"></h2>
    <!--<audio autoplay="autoplay" loop="loop"> -->
    <!--    <source src="http://www.xiaobaishegongku.site/ns/static/1.mp3">-->
    <!--</audio>-->
    <script>
        const text = document.querySelector('.text');
        const txt  =["<?php echo $_GET['zf'] ?>"]; 
        
        var index=0;
        var xiaBiao= 0;
        var huan = true;
     
        setInterval(function(){
           
            if(huan){      
                text.innerHTML = txt[xiaBiao].slice(0,++index);
                console.log(index);
            }
            else{
                text.innerHTML = txt[xiaBiao].slice(0,index--);
                console.log(index);
            }

            if(index==txt[xiaBiao].length+3)
            {
                huan = false;
            }
            else if(index<0)
            {
                index = 0;
                huan = true;
                xiaBiao++;
                if(xiaBiao>=txt.length)
                {
                    xiaBiao=0; 
                }
            }

        },200)
    </script>
</body>
</html>