我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

晚上加班赶工，等走出公司大门，已是漫天繁星。坐上回家的公交，困顿之意袭来。

大脑开始放空，意识开始飘散，感觉这条回家的路变得非常漫长。下意识的解锁手机查看时间，然后情不自禁的被屏保图片吸引，我的屏保图片是我向往的草原。

于是，我开始玩起了反复解锁查看屏保的小游戏。也逐渐发现一些平时没有注意到的，手机的功能细节。

日期的展示、指纹解锁的动效、解锁之后应用上移的效果，好像都能用CSS实现。事情开始变得有趣了，灵感来了，我怎么能轻易放走，当然是打开IDEA实现它。

一张向往的图片

天似穹庐，笼盖四野。

天苍苍，野茫茫。风吹草低见牛羊。

心中的向往，打工的动力，理想的生活。

码上掘金

完整代码已经放到了我的码上掘金中，在线进行代码效果的即时预览，是真的方便。 code.juejin.cn/pen/7122117…

功能设计

按钮可操作性

根据手机操作实验，不难发现按钮可操作性跟当前屏幕状态有关。

操作	屏幕熄灭	屏幕点亮	主屏幕
息屏	❌	✅	❌
亮屏	✅	❌	✅
解锁	✅	❌	❌

功能实现

息屏

前置摄像头是一致都存在的，又一个可爱的小圆点和圆环组成；
息屏之后，可以进行亮屏操作，不可以进行解锁操作。

圆环效果

通过伪类实现

.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%;
}
.....
<div class="camera"></div>

亮屏

屏幕点亮之后，手机界面展示日期和海洋球。
可以进行息屏操作，也可以进行解锁操作。

展示日期

第一行是当前星期；
第二行是当前时分；
第三行是当前月日；

均可通过Date对象中获取，简单列一下

getMonth()：从 Date 对象返回月份 (0 ~ 11)。所以实际展示的时候需要进行+1。

getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getHours()：返回 Date 对象的小时 (0 ~ 23)。

getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。

getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。对应的是周日、周一至周六。

初始化日期信息方法

// 初始化日期信息
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(滤镜) 属性。

磨砂样式

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

解锁

解锁之后，主屏幕内容会有一个向上移动的效果，借助的是经典的animation动画。
此时，只能进行息屏操作，不用再重复亮屏操作。

总结

想去五台山，祈福一下平安喜乐，感受一下仿佛伸手就能触碰到底云朵，眺望一下远方的草原和牛羊。

但是眼下，只能合上手机，睡一觉，梦里应该什么都有。

「码上掘金」我的发呆专属，反复解锁手机屏幕

前言