中秋节快乐-网页制作-共享接口

瑞羽云 • • 共享API, 技术交流, 资源分享

中秋佳节

中秋节 9月10日 教师节 周六

好久没有开放过共享接口了，本次将网页制作接口开放。

恰逢双节同至，笔者网上冲浪时发现CSDN有作者自己写了HTML的网页，我就CV了下来，哈哈哈，如有侵权请联系我删除哦。

预览图片

网页版预览地址

https://api.ruiyuyun.cn/quwei_zhongqiuzhufu/index.html

在线生成地址

为了方便大家伙开箱即用，避免部署的麻烦，笔者也集成进在线网页制作系统里了哦，大家伙可以直接点击链接进入，输入简单内容一键生成。

https://api.ruiyuyun.cn/quwei_zhongqiuzhufu/

如果您是普通用户，这篇文字就到此为止了。

如果您是开发者，瑞羽云也为您提供了接口用于自定义生成网页

在线生成接口

生成预览网站

注意：此种方式没有在服务器上记录数据，仅预览网页。

调用方式：

baseurl：https://api.ruiyuyun.cn/webpreview.php

请求方式：POST请求

请求体所需参数：appkey(key必须); temid(模板id); con1(内容1); con2(内容2); con3(内容3); 

备注：

1.对于中秋祝福页面参数appkey=ruiyu；

2.temid=quwei_zhongqiuzhufu

3.con1为网页标题栏

3.con2为第一行文字

4.con1为第二行文字

采用postman测试接口，传参如下图所示：

备用接口

调用方式：

baseurl：https://blog.ruiyuyun.cn/webpreview.php

请求方式：POST请求，参数同上

直接生成网页

注意：此种方式会产生数据记录在服务器中，用于生成网页返回给用户分享使用。

调用方式：

baseurl：https://api.ruiyuyun.cn/appresult.php

请求方式：POST请求

请求体所需参数：appkey(key必须); temid(模板id); con1(内容1); con2(内容2); con3(内容3); 

备注：

1.对于中秋祝福页面参数appkey=ruiyu；

2.temid=quwei_zhongqiuzhufu

3.con1为网页标题栏

3.con2为第一行文字

4.con1为第二行文字

采用postman测试接口，传参如下图所示：

最终如果生成成功的话会返回json串，类似形式如下：

{
	"success": "true",
	"code": 0,
	"temid": "quwei_zhongqiuzhufu",
	"id": "RYgVHoG0i",
	"resurl": "https://api.ruiyuyun.cn/web.php?id=RYgVHoG0i"
}

此时客户端或者网页端取出resurl字段即为生成后的网页！

备用接口

调用方式：

baseurl：https://blog.ruiyuyun.cn/appresult.php

请求方式：POST请求，参数同上

如果您希望高度自定义部署也可以直接使用以下HTML+CSS源代码，部署在本地或者服务器：

源代码

index.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">
    <link rel="stylesheet" href="style.css">
    <title>中秋节快乐</title>
</head>
<body>
    <div class="container">
        <div class="moon"></div>
        <h1>2022 祝愿中秋快乐</h1>
        <p>陈橘又青</p>
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="wave wave_1"></div>
        <div class="wave wave_2"></div>
        <div class="wave wave_3"></div>
    </div>
 
</body>
</html>

style.css

 
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
body {
	background: #4a47e9f1;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: .5rem 1rem 1rem 0 rgba(0,0,0,0.6);
	overflow: hidden;
  color: #333;
	background-image: linear-gradient(to top, #191730, #10131d, #19125f, #050e44);
}
.moon {
	position: absolute;
	left: 4rem;
	top: 3rem;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background-image: linear-gradient(to left top, #b1b1c5, #928fa3, #746f82, #575162, #3c3444);
 
}
.moon:hover {
 
		transform: scale(1.2);
		transition: 3s;
}
h1 {
  position: absolute;
  top: 30%;
  left:24%;
  font-size: 2.2rem;
  color: goldenrod;
}
p {
  position: absolute;
  top: 40%;
  left:60%;
  font-family: 'Italianno', cursive;
  color:goldenrod;
  font-size: 2rem;
}
 
.star {
	background: white;
	border-radius: 50%;
	position: absolute;
}
 
.star1 {
	width: .2rem;
	height: .2rem;
	top: 3rem;
	right: 4rem;
}
.star2, .star3 {
	width: .1rem;
	height: .1rem;
}
.star2 {
	top: 5rem;
	right: 10rem;
}
.star3 {
	top: 14rem;
	left: 3rem;
}
.wave {
  position: absolute;
  width: 150%;
  bottom: 0;
}
 
.wave::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 20px;
  background-size: 40px 40px;
 
}
 
.wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat;
  height: 27px;
  background-size: 80px 40px;
 
}
.wave {
	transition: 3s;
}
.wave_1 {
  height: 80px;
  background: #7375f5;
  z-index: 30;
}
 
.wave_1::before {
  background-image: radial-gradient(circle at 20px 28px, transparent 24px, #525ce2 25px);
}
 
.wave_1::after {
  background-image: radial-gradient(circle at 10px 0px, #525ce2 14px, transparent 25px);
}
 
.wave_2 {
  left: -30px;
  height: 120px;
  background: #525ce2;
  z-index: 20;
}
 
.wave_2::before {
  background-image: radial-gradient(circle at 20px 28px, transparent 24px, #181e7e 25px);
}
 
.wave_2::after {
  background-image: radial-gradient(circle at 10px 0px, #181e7e 14px, transparent 15px);
}
 
.wave_3 {
  left: -10px;
  height: 150px;
  background: #181e7e;
  z-index: 10;
}
 
.wave_3::before {
  background-image: radial-gradient(circle at 20px 28px, transparent 24px, #080b31 25px);
}
 
.wave_3::after {
  background-image: radial-gradient(circle at 10px 0px, #080b31 14px, transparent 25px);
}
 
.wave_1 {
          animation: wave1 10s infinite;
}
 
@keyframes wave1 {
  0% {
            transform: translateX(0px);
  }
  25% {
            transform: translateX(-50px);
  }
  50% {
            transform: translateX(0px);
  }
  75% {
            transform: translateX(-30px);
  }
  100% {
            transform: translateX(0px);
  }
}
.wave_2 {
          animation: wave2 12s infinite;
}
 
@keyframes wave2 {
  0% {
            transform: translateX(0px);
  }
  25% {
            transform: translateX(25px);
  }
  50% {
            transform: translateX(0px);
  }
  75% {
            transform: translateX(30px);
  }
  100% {
            transform: translateX(0px);
  }
}
.wave_3 {
          animation: wave3 9s infinite;
}
@keyframes wave3 {
  0% {
            transform: translateX(0px);
  }
  25% {
            transform: translateX(-30px);
  }
  50% {
            transform: translateX(0px);
  }
  75% {
            transform: translateX(-10px);
  }
  100% {
            transform: translateX(0px);
  }
}

版权声明：本文所用到的代码为CSDN博主「陈橘又青」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_63947499/article/details/126505715

版权声明：
作者：瑞羽云
链接：https://www.ruiyuyun.cn/archives/425.html
来源：瑞羽云
本站部分内容源于互联网，如果侵犯了您的权利，请发邮件告之，邮箱zcrvip@vip.qq.com
如果可以，希望您在分享的时候直接分享本网址，整理不易，谢谢配合！
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录