致青春！一鍵上線大家專屬的雲上畢業記念冊

簡介：畢業不說再見，青春不散場！在雲端，在一塊兒！在問答 https://developer.aliyun.com/...的留言區域曬出本身「線上環境」部署的畢業記念冊，在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的留言將得到咱們送出的畢業大禮包，阿里雲的公仔盲盒一個，讓你的青春永遠在線！

本文內容由阿里雲實名註冊用戶自發貢獻，版權歸原做者全部，阿里雲開發者社區不擁有其著做權，亦不承擔相應法律責任。具體規則請查看《阿里雲開發者社區用戶服務協議》和《阿里雲開發者社區知識產權保護指引》。若是您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將馬上刪除涉嫌侵權內容。