致青春!一键上线你们专属的云上毕业纪念册
简介:毕业不说再见,青春不散场!在云端,在一起!在问答https://developer.aliyun.com/ask/321737的留言区域晒出自己「线上环境」部署的毕业纪念册,在6月30号18点之前点赞数前10可以获得我们送出的毕业大礼包,阿里云的公仔盲盒一个以及10元的代金券一张,让你的青春永远在线!
毕业不说再见,青春不散场
经历了动荡的2020年,让2021年的同窗时光显得格外珍惜。早上的起床号仍然会响起,食堂的阿姨照常准备早餐,门口的大爷照例检查着证件和健康码,三年在一起已经980天18个小时51分59秒。但是又是一年毕业季,疫情影响了你们开学的时间,却没有影响到你们毕业,少了盛大的毕业典礼,但是一起走过的青春不会忘记。
毕业是千百万个人,千百万个夏天的故事,我们有千百万个理由让你的毕业更加特别一点。阿里云云开发平台的用户安南同学定制了他的专属毕业纪念册,他将他的纪念册奉献给大家,让所有的毕业生都可以快速拥有自己的云上毕业纪念册,通过阿里云云开发平台一键上线。不管你是IT大拿、还是建站小白,都可以分分钟获取自己专属的也毕业纪念册。毕业不说再见,青春不散场!
毕业纪念册效果图
毕业纪念册的上线步骤
1. 创建应用
a. 登陆云开发平台
登录云开发平台。打开网址https://workbench.aliyun.com/,使用阿里云账号登录,按照提示创建团队,点击同意协议。没有阿里云账号的用户,在登录页面注册后进行登录即可。为了保证最好的使用体验,请使用Chrome浏览器。
b. 创建应用
打开快速开始 https://workbench.aliyun.com/page/quickstart,点击创建新应用。
c. 云资源访问授权。
云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。
d. 选择语言和计算服务。
分别选择开发语言NodeJS,创建方式选择直接创建,然后点击下一步。然后填写应用的名称和介绍,选择所属产品线(按需要选择),计算服务选择FC。然后点击完成,云服务如果没有开通需要开通一下,开通不收费。
2. 配置和上线应用。
a. 下载毕业纪念册的代码。
访问https://github.com/cloudworkbench/memory-album 下载源代码后解压缩到本地目录。
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>
在云端,在一起!领取毕业大礼包
毕业不说再见,青春不散场!在云端,在一起!
点击访问问答https://developer.aliyun.com/ask/321737的留言区域晒出自己「线上环境」部署的毕业纪念册 (包括网址和截图)可以获得10元的代金券一张,在6月30号18点之前点赞数前10的留言将获得我们送出的毕业大礼包,阿里云的公仔盲盒一个,让你的青春永远在线!
原文链接:https://developer.aliyun.com/article/784591?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
致青春!一键上线你们专属的云上毕业纪念册相关推荐
- 2019年技术盘点云数据库篇(二):阿里云携手MongoDB率先上线4.2数据库 云上数据库已是大势所趋...
戳蓝字"CSDN云计算"关注我们哦! 作者 | 刘丹 出品 | CSDN云计算(ID:CSDNcloud) 随着技术的飞速发展,云数据库在云计算的大背景下,作为一种新兴的共享基础架 ...
- EMQ x 阿里云:云上高效构建,IoT 数据一站处理|直播预告
随着物联网与云计算的发展,进入云时代以来,各企业的数字化转型也纷纷「云」化.在云上构建可弹性伸缩.自动化管理.承载海量物联网设备连接的数据中心,从而实现企业的降本增效,成为大势所趋. 为了帮助企业应对 ...
- 最佳实践丨构建云上私有池(虚拟IDC)的5种方案详解
简介:云上私有池系列终篇终于来了,本文将重点介绍构建云上的私有池(虚拟IDC)的多种方案和各自的优缺点,并给出相关的性价比优化建议. 本文作者:阿里云技术专家李雨前 摘要 围绕私有池(虚拟IDC)的价 ...
- 实践分享丨构建云上私有池(虚拟IDC)的5种方案详解
简介: 云上私有池系列终篇终于来了,本文将重点介绍构建云上的私有池(虚拟IDC)的多种方案和各自的优缺点,并给出相关的性价比优化建议. 本文作者:阿里云技术专家李雨前 摘要 围绕私有池(虚拟IDC)的 ...
- 构建云上私有池(虚拟IDC)的5种方案详解
摘要 围绕私有池(虚拟IDC)的价值.获取.选购.容量规划.落地构建这几个方面,我们以专题文章形式来一一介绍.例如从业务确定性.连续性角度介绍了私有池的价值.如何获取:接着从业务Workload特征出 ...
- 一款跑在云上的定制容器专属 OS 来了——LifseaOS | 龙蜥技术
简介:如果可以把运维 API 化,那我们是不是可以把 OS 也作为一个 K8S 可以管理的资源,让 K8S 像管理容器一样管理OS? 引言 在 2021 年 10 月的云栖大会上,为云原生而生的 OS ...
- SQL审核 | “云上”用户可以一键使用 SQLE 审核服务啦
阿里云用户今后不需要安装部署SQLE, 就可以免费使用审核服务了. 近期,爱可生正式通过了阿里云计算巢 "云合计划"合作伙伴认证,并成功发布"云树SQL审核软件" ...
- 阿里云应用高可用 AHAS 正式商用,可一键提升云上应用可用性
在分布式架构环境下,服务间的依赖日益复杂,可能没有人能说清单个故障对整个系统的影响,构建一个高可用的分布式系统面临着很大挑战. 7月17日,阿里云应用高可用服务AHAS 正式商用,包含架构感知.流控降 ...
- Oracle宣布在云上正式上线 自治事务处理数据库
在 8 月7日,Oracle 宣布在云上正式上线自治事务处理数据库,这个名词 ATP应对于早前发布的 ADW(今年 3月份 Oracle 宣布正式上线的自治数据仓库数据库). 完整的发布会视频链接在这 ...
最新文章
- 创建型模式之Builder模式
- 【学习笔记】Dilworth 定理的构造性证明
- python数据透视、有的value不能同时输出_python – Pandas数据透视表ValueError:索引包含重复的条目,无法重新整形...
- 多线程java_40个Java多线程问题总结
- 浪潮服务器可管理和维护性,专注用户需求,浪潮服务器提供优质高效的产品
- 宇宙最全的架构开发技术百科全书
- oracle执行计划结果分析_优化体系--sql整体优化(调优工具分析)
- SIP - FreeSwitch 安装 编译
- 简单奥数题 c语言基础
- java cmd 编译jar_Java程序在命令行下编译运行打Jar包
- C语言使用文件指针时遇到的位置问题
- 除了压缩包加密,还有这些更好的文件加密方案
- 阿里云邮箱域名解析设置要求
- 经典编程题——折纸问题
- 手机在泰国显示无服务器,怎么连接泰国服务器
- vSphere Client中虚拟机与客户机中的剪切板不能够拷贝、粘贴
- 搜索引擎排名都选乐云seo_百度官网排名-搜索引擎算法优化
- 基于vtkVoxelContoursToSurfaceFilter实现勾画图像的轮廓线面重建
- php浏览器下载文件 文件名 空格 中文 处理
- vue项目访问的时候,用localhost能访问,但是用本机ip就不能访问 的解决办法,亲测有效
热门文章
- 《花开半夏》--7 陆元(2)
- 华为p20云空间无法清理_华为P20系列这样设置手机,更能保护你的隐私安全!
- c语言编程计算原子态密度,准静态C_V法测量硅表面态密度分布及数据处理.pdf
- 【Unity Shader】常用光照计算公式
- 推荐一款超好用的剪贴板增强工具—Clipx
- [国产单片机] 聊聊曾经那些很火的单片机
- T 39786-2021
- Python 将excel中的选择题 导入到word文档中
- 常用计算机设备教案,办公室常用设备教案——计算机办公设备(计算机的应用和发展)01.docx...
- 9个优秀的资源网站,资源丰富到不敢想象