简介:毕业不说再见,青春不散场!在云端,在一块儿!在问答 https://developer.aliyun.com/...的留言区域晒出本身「线上环境」部署的毕业记念册,在6月30号18点以前点赞数前10能够得到咱们送出的毕业大礼包,阿里云的公仔盲盒一个以及10元的代金券一张,让你的青春永远在线!
经历了动荡的2020年,让2021年的同学时光显得格外珍惜。早上的起床号仍然会响起,食堂的阿姨照常准备早餐,门口的大爷照例检查着证件和健康码,三年在一块儿已经980天18个小时51分59秒。可是又是一年毕业季,疫情影响了大家开学的时间,却没有影响到大家毕业,少了盛大的毕业典礼,可是一块儿走过的青春不会忘记。css
毕业是千百万我的,千百万个夏天的故事,咱们有千百万个理由让你的毕业更加特别一点。阿里云云开发平台的用户安南同窗定制了他的专属毕业记念册,他将他的记念册奉献给你们,让全部的毕业生均可以快速拥有本身的云上毕业记念册,经过阿里云云开发平台一键上线。无论你是IT大拿、仍是建站小白,均可以分分钟获取本身专属的也毕业记念册。毕业不说再见,青春不散场!html
毕业记念册效果图git
登陆云开发平台。打开网址https://workbench.aliyun.com/,使用阿里云帐号登陆,按照提示建立团队,点击赞成协议。没有阿里云帐号的用户,在登陆页面注册后进行登陆便可。为了保证最好的使用体验,请使用Chrome浏览器。github
打开快速开始 https://workbench.aliyun.com/page/quickstart,点击建立新应用。canvas
云资源访问受权。若是您以前没有使用过云开发平台,会出现云资源受权管理的选项,往下拉出现直至赞成受权的字样,点击「赞成受权」后出现受权成功,点击进入「下一步」。浏览器
分别选择开发语言NodeJS,建立方式选择直接建立,而后点击下一步。而后填写应用的名称和介绍,选择所属产品线(按须要选择),计算服务选择FC。而后点击完成,云服务若是没有开通须要开通一下,开通不收费。字体
访问https://github.com/cloudworkbench/memory-album 下载源代码后解压缩到本地目录。ui
应用建立成功后会跳转到应用详情页面,点击平常环境的「部署配置」,依次选择 【自动建立环境】-【选择任意可用区】-【自动建立交换机】阿里云
环境配置完成后,完成后回到以下页面,点击在线开发部署,在新的窗口打开WebIDE部署, 点击「在线开发部署」,打开CloudIDE上传代码文件。url
CloudIDE加载完成后,选中下载后解压好的文件,将源码文件直接拖拽到CloudIDE的根目录,上传完成后记得保存而且推送。
点击CloudIDE左侧的部署Tab,选择平常环境,点击当即部署,在弹出框中确认配置后继续部署。部署完成后产生临时域名,便可访问好部署的站点。快点给同窗们分享一下吧,临时域名30分钟有效期。
生产的临时域名是云开发平台免费提供的,有效期只有30分钟,过时以后须要手动刷新才能够生效。若是想保留做为长期的毕业站点使用,能够绑定本身的域名,如今不少域名1块钱首年。
在你购买的域名控制台,配置CNAME映射到该域名,下图以阿里云的域名控制台为例。若是你是新购的域名尚未备案的话,在云开发平台建立一个region在香港的产品也能够当即使用。
在云开发平台的应用详情页面点击线上环境的「域名配置」,绑定配置好的域名,而且按照平常环境的配置进行「环境配置」,保存后打开「在线开发部署」进行一键部署便可使用本身的域名进行访问。
在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); }
这里采用的是外链引入音乐的方式,你也能够用本身本地的音乐文件,那样打开更快,只要放到项目根路径下直接引用就行。先生成外链,而后在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>
毕业不说再见,青春不散场!在云端,在一块儿!
点击访问问答https://developer.aliyun.com/ask/321737的留言区域晒出本身「线上环境」部署的毕业记念册 (包括网址和截图)能够得到10元的代金券一张,在6月30号18点以前点赞数前10的留言将得到咱们送出的毕业大礼包,阿里云的公仔盲盒一个,让你的青春永远在线!
本文内容由阿里云实名注册用户自发贡献,版权归原做者全部,阿里云开发者社区不拥有其著做权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。若是您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将马上删除涉嫌侵权内容。