---

theme: condensed-night-purple highlight: atelier-lakeside-light

---

前言

晚上加班趕工，等走出公司大門，已是漫天繁星。坐上回家的公交，困頓之意襲來。

大腦開始放空，意識開始飄散，感覺這條回家的路變得非常漫長。下意識的解鎖手機查看時間，然後情不自禁的被屏保圖片吸引，我的屏保圖片是我向往的草原。

於是，我開始玩起了反覆解鎖查看屏保的小遊戲。也逐漸發現一些平時沒有注意到的，手機的功能細節。

日期的展示、指紋解鎖的動效、解鎖之後應用上移的效果，好像都能用CSS實現。事情開始變得有趣了，靈感來了，我怎麼能輕易放走，當然是打開IDEA實現它。

一張嚮往的圖片

天似穹廬，籠蓋四野。

天蒼蒼，野茫茫。風吹草低見牛羊。

心中的嚮往，打工的動力，理想的生活。

碼上掘金

完整代碼已經放到了我的碼上掘金中，在線進行代碼效果的即時預覽，是真的方便。 http://code.juejin.cn/pen/7122117149866328077

功能設計

按鈕可操作性

根據手機操作實驗，不難發現按鈕可操作性跟當前屏幕狀態有關。

| 操作 | 屏幕熄滅 | 屏幕點亮 | 主屏幕 | | -- | ---- | ---- | --- | | 息屏 | ❌ | ✅ | ❌ | | 亮屏 | ✅ | ❌ | ✅ | | 解鎖 | ✅ | ❌ | ❌ |

功能實現

息屏

• 前置攝像頭是一致都存在的，又一個可愛的小圓點和圓環組成；
• 息屏之後，可以進行亮屏操作，不可以進行解鎖操作。

圓環效果

通過偽類實現

```js .camera { position: absolute; width: 20px; height: 20px; border-radius: 50%; top: 15px; left: 20px; opacity: 0.6; background: #666; z-index: 999; } .camera::before { content: ''; position: absolute; width: 12px; height: 12px; top: 4px; left: 4px; background: #f2f2f2; border-radius: 50%; } .....

```

亮屏

• 屏幕點亮之後，手機界面展示日期和海洋球。
• 可以進行息屏操作，也可以進行解鎖操作。

展示日期

• 第一行是當前星期；
• 第二行是當前時分；
• 第三行是當前月日；

均可通過Date對象中獲取，簡單列一下

getMonth()：從 Date 對象返回月份 (0 ~ 11)。所以實際展示的時候需要進行+1。

getDate()：從 Date 對象返回一個月中的某一天 (1 ~ 31)。

getHours()：返回 Date 對象的小時 (0 ~ 23)。

getMinutes()：返回 Date 對象的分鐘 (0 ~ 59)。

getDay()：從 Date 對象返回一週中的某一天 (0 ~ 6)。對應的是週日、週一至週六。

初始化日期信息方法

js // 初始化日期信息 function initNowDate() { var now = new Date(); var month = now.getMonth() + 1; var day = now.getDate(); var hour = now.getHours(); var minutes = now.getMinutes(); var weekList = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']; var week = weekList[now.getDay() - 1]; if (hour >= 0 && hour <= 9) { hour = '0' + hour; } if (minutes >= 0 && minutes <= 9) { minutes = '0' + minutes; } var timeStr = hour + ':' + minutes; var dayStr = month + '月' + day + '日'; lightWeek.innerHTML = week; lightDay.innerHTML = dayStr; lightTime.innerHTML = timeStr; }

磨砂海洋球

常見的指紋解鎖，一般通過svg實現，我的svg功底一般，所以我變通了一下，改成了磨砂海洋球。

• 依靠磨砂效果，海洋球有了立體感。
• 而磨砂的實現，使用的是CSS3 filter(濾鏡) 屬性。

磨砂樣式

js .circular .liquid1 { background: #2984d4; transform: translate(0, 40px) translateZ(0); animation: liquid1 6s linear infinite; -webkit-filter: blur(13px); filter: blur(13px); }

解鎖

• 解鎖之後，主屏幕內容會有一個向上移動的效果，藉助的是經典的animation動畫。
• 此時，只能進行息屏操作，不用再重複亮屏操作。

總結

想去五台山，祈福一下平安喜樂，感受一下彷彿伸手就能觸碰到底雲朵，眺望一下遠方的草原和牛羊。

但是眼下，只能合上手機，睡一覺，夢裏應該什麼都有。

我正在參加「創意開發 投稿大賽」詳情請看：掘金創意開發大賽來了！