写点什么

「CSS 畅想」我的发呆专属,反复解锁手机屏幕

作者:叶一一
  • 2022-10-14
    北京
  • 本文字数:2137 字

    阅读完需:约 1 分钟

「CSS畅想」我的发呆专属,反复解锁手机屏幕

前言

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

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

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

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

一张向往的图片

天似穹庐,笼盖四野。

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

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


image

整体效果

完整代码已经在线代码预览的平台上。

https://code.juejin.cn/pen/7122117149866328077

功能设计

按钮可操作性

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

所以这次的功能主要包括三个:息屏、亮屏、解锁。


功能实现

息屏

  • 前置摄像头是一致都存在的,又一个可爱的小圆点和圆环组成;

  • 息屏之后,可以进行亮屏操作,不可以进行解锁操作。

// 熄灭屏幕function restShow() {  if (restFlag) {    screenLight.style.display = 'none';    fingerprint.style.display = 'none';    screenBlock.style.display = 'block';    lightContent.style.display = 'none';    lightFlag = true;    unlockFlag = false;    restFlag = false;  }}
复制代码

亮屏

  • 屏幕点亮之后,手机界面展示日期和海洋球。

  • 可以进行息屏操作,也可以进行解锁操作。

// 点亮屏幕function lightShow() {  if (lightFlag) {    screenLight.style.display = 'block';    fingerprint.style.display = 'block';    screenBlock.style.display = 'none';    lightDate.style.display = 'block';    initNowDate();    lightFlag = false;    unlockFlag = true;    restFlag = true;  }}
复制代码

展示日期

  • 第一行是当前星期;

  • 第二行是当前时分;

  • 第三行是当前月日;

均可通过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()];  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);}.circular .liquid2 {  background: #e18554;  transform: translate(2px, 8px) translateZ(0);  animation: liquid2 6s linear infinite;  -webkit-filter: blur(11px);  filter: blur(11px);}.circular .liquid3 {  background: #2984d4;  transform: translate(-12px, 0) translateZ(0);  animation: liquid3 6s linear infinite;  -webkit-filter: blur(13px);  filter: blur(13px);}@keyframes liquid1 {  33% {    transform: translate(40px, 8px) translateZ(0);  }  66% {    transform: translate(0, 0) translateZ(0);  }}@keyframes liquid2 {  33% {    transform: translate(40px, 30px) translateZ(0);  }  66% {    transform: translate(0, -10px) translateZ(0);  }}@keyframes liquid3 {  33% {    transform: translate(50px, 50px) translateZ(0);  }  66% {    transform: translate(-10px, 50px) translateZ(0);  }}
复制代码

解锁

  • 解锁之后,主屏幕内容会有一个向上移动的效果,借助的是经典的 animation 动画。

  • 此时,只能进行息屏操作,不用再重复亮屏操作。

// 解锁屏幕function unlockShow() {  if (unlockFlag) {    fingerprint.style.display = 'none';    lightDate.style.display = 'none';    lightContent.style.display = 'block';    lightFlag = false;    unlockFlag = false;    restFlag = true;  }}
复制代码

总结

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

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

发布于: 刚刚阅读数: 4
用户头像

叶一一

关注

掘金优秀创作者 2022-09-01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「CSS畅想」我的发呆专属,反复解锁手机屏幕_CSS_叶一一_InfoQ写作社区