简介：毕业不说再见，青春不散场！在云端，在一起！在问答https://developer.aliyun.com/…的留言区域晒出本人「线上环境」部署的毕业纪念册，在6月30号18点之前点赞数前10能够取得咱们送出的毕业大礼包，阿里云的公仔盲盒一个以及10元的代金券一张，让你的青春永远在线！
毕业不说再见，青春不散场
经验了动荡的2020年，让2021年的同学时光显得分外珍惜。早上的起床号依然会响起，食堂的阿姨照常筹备早餐，门口的大爷照例查看着证件和衰弱码，三年在一起曾经980天18个小时51分59秒。然而又是一年毕业季，疫情影响了你们开学的工夫，却没有影响到你们毕业，少了隆重的毕业典礼，然而一起走过的青春不会遗记。
毕业是千百万集体，千百万个夏天的故事，咱们有千百万个理由让你的毕业更加特地一点。阿里云云开发平台的用户安南同学定制了他的专属毕业纪念册，他将他的纪念册奉献给大家，让所有的毕业生都能够疾速领有本人的云上毕业纪念册，通过阿里云云开发平台一键上线。不论你是IT大拿、还是建站小白，都能够分分钟获取本人专属的也毕业纪念册。毕业不说再见，青春不散场！
毕业纪念册效果图
毕业纪念册的上线步骤
1. 创立利用
a. 登陆云开发平台
登录云开发平台。应用阿里云账号登录，依照提醒创立团队，点击批准协定。没有阿里云账号的用户，在登录页面注册后进行登录即可。为了保障最好的应用体验，请应用Chrome浏览器。
b. 创立利用
关上疾速开始，点击创立新利用。
c. 云资源拜访受权。
云资源拜访受权。如果您之前没有应用过云开发平台，会呈现云资源受权治理的选项，往下拉呈现直至批准受权的字样，点击「批准受权」后呈现受权胜利，点击进入「下一步」。
d. 抉择语言和计算服务。
别离抉择开发语言NodeJS，创立形式抉择间接创立，而后点击下一步。而后填写利用的名称和介绍，抉择所属产品线（按须要抉择），计算服务抉择FC。而后点击实现，云服务如果没有开明须要开明一下，开明不免费。
2. 配置和上线利用。
a. 下载毕业纪念册的代码。
拜访https://github.com/cloudworkb… 下载源代码后解压缩到本地目录。
b. 创立环境
利用创立胜利后会跳转到利用详情页面，点击日常环境的「部署配置」，顺次抉择 【主动创立环境】-【抉择任意可用区】-【主动创立交换机】
c. 在线开发部署
环境配置实现后，实现后回到如下页面，点击在线开发部署，在新的窗口关上WebIDE部署, 点击「在线开发部署」，关上CloudIDE上传代码文件。
d. 上传代码文件
CloudIDE加载实现后，选中下载后解压好的文件，将源码文件间接拖拽到CloudIDE的根目录，上传实现后记得保留并且推送。
e. 一键上线毕业纪念册
点击CloudIDE左侧的部署Tab，抉择日常环境，点击立刻部署，在弹出框中确认配置后持续部署。部署实现后产生长期域名，即可拜访好部署的站点。快点给同学们分享一下吧，长期域名30分钟有效期。
f. 绑定线上域名
生产的长期域名是云开发平台收费提供的，有效期只有30分钟，过期之后须要手动刷新才能够失效。如果想保留作为长期的毕业站点应用，能够绑定本人的域名，当初很多域名1块钱首年。
在你购买的域名控制台，配置CNAME映射到该域名，下图以阿里云的域名控制台为例。如果你是新购的域名还没有备案的话，在云开发平台创立一个region在香港的产品也能够立刻应用。
在云开发平台的利用详情页面点击线上环境的「域名配置」，绑定配置好的域名，并且依照日常环境的配置进行「环境配置」，保留后关上「在线开发部署」进行一键部署即可应用本人的域名进行拜访。
毕业纪念册可定制的性能
1. 背景图更换
在index.html中更改url的门路images/classroom.png，或者替换文件夹里classroom.png文件
body {
perspective: 1000px;
display: block;
padding:0;
margin:0;
overflow:hidden;
background-image:url("images/classroom.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;樱花透明度
在index.html中更改opacity 0~1之间的数字,1是齐全清晰 0是隐形
/*樱花透明度*/
canvas {
padding:0;
margin:0;
opacity:0.3;在一起计时
在js/time.js下输出退学年份就能够算进去在一起的工夫
var arr = "2018-10-1 21:00:00".split(/[- :]/);//改这里
var box = document.getElementsByClassName('textCon')[0];黑白上毕业留念的话
在js/typing.js中批改str的内容以及显示的速度,也就是到时候黑板上显示的内容，字体大小/色彩/地位能够在css中调整
let divTyping = document.getElementById('text')//div
let i = 0,//初始化
timer = 0,
str = '山无棱,天地合,才敢与君绝'//要显示的字
function typing () {
if (i <= str.length) {
divTyping.innerHTML = str.slice(0, i++) + '_'//当字没显示完的时候,从字符串上切下来下来
timer = setTimeout(typing, 450)//每次的距离
}旋转相册
在css/xuanzhuan.css中，自定义图片, 图片大小 以及 旋转相册地位，能够替换掉image文件夹里的图片。
.xuanzhuan {
width:200px;
height:200px;
margin: 100px auto;
background: url("../images/xuanzhuan/shu.jpg") no-repeat;
background-size: cover;
transform-style: preserve-3d;
position: absolute;
transition: 15s linear;
top: 50%;
left: 42%;
z-index: initial;
}
.xuanzhuan:hover{
transform: rotateY(360deg);
}
.xuanzhuan div{
height:150px;
width: 200px;
position: absolute;
background-size: cover;
background: no-repeat;
}
.xuanzhuan div:nth-child(1){ /*0,0,2,1*/
background: url("../images/xuanzhuan/1.jpg");
background-size: cover;
transform:rotateY(0deg) translateZ(400px);
}
.xuanzhuan div:nth-child(2){
background: url("../images/xuanzhuan/2.jpg");
background-size: cover;
transform:rotateY(60deg) translateZ(400px);
}
.xuanzhuan div:nth-child(3){
background: url("../images/xuanzhuan/3.jpg");
background-size: cover;
transform:rotateY(120deg) translateZ(400px);
}
.xuanzhuan div:nth-child(4){
background: url("../images/xuanzhuan/4.jpg");
background-size: cover;
transform:rotateY(180deg) translateZ(400px);
}
.xuanzhuan div:nth-child(5){
background: url("../images/xuanzhuan/5.jpg");
background-size: cover;
transform:rotateY(240deg) translateZ(300px);
}
.xuanzhuan div:nth-child(6){
background: url("../images/xuanzhuan/6.jpg");
background-size: cover;
transform:rotateY(300deg) translateZ(300px);
}BGM音乐
这里采纳的是外链引入音乐的形式，你也能够用本人本地的音乐文件，那样关上更快，只有放到我的项目根门路下间接援用就行。学生成外链，而后在index.html中引入，在index.html下的audio标签的里的source标签的src属性中粘贴链接。
<!--音乐-->
<audio controls class="music">
<source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg">
</audio>原文链接
本文为阿里云原创内容，未经容许不得转载。
发表回复