接口地址就是 :
http://你的域名/api.php?name=对方名字&zf=祝福语录
<!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>版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除!
发表评论