「CSS特效」我的发呆专属,反复解锁手机屏幕
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动画。
- 此时,只能进行息屏操作,不用再重复亮屏操作。
总结
想去五台山,祈福一下平安喜乐,感受一下仿佛伸手就能触碰到底云朵,眺望一下远方的草原和牛羊。
但是眼下,只能合上手机,睡一觉,梦里应该什么都有。
我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了!
- await-to-js 源码分析,体验一把捕获异常的优雅
- CSS伪类的第三集,原来伪类也可组CP
- 从:is()说起,开启CSS伪类第二集
- 一组纯CSS开发的聊天背景图,帮助避免发错消息的尴尬
- 「CSS特效」我的发呆专属,反复解锁手机屏幕
- 「技术分享」以Antd为例,快速打通UI组件开发的任督二脉
- 「功能实现」我封装了一个表单组件,感觉离财富自由又近了一步
- 「经验总结」高效开发,老代码可以这样动
- 前端开发提效小技巧之业务功能篇
- 人生有忙忙碌碌,也有诗和远方 | 2022年中总结
- 【端午节】新奇体验,我用react实现网页游戏的全过程(包括规则设计)
- 【暑假记忆】消暑神器,我用CSS复刻了一个游戏机
- 突围?我愿称之为向上的攀登者
- 【孟夏之遇】望孟夏之短夜兮,萤星相伴
- 【技术学习】SVG-边学边做
- 【TS实践】自己动手丰衣足食的TS项目开发
- 【码上掘金】通过FileReader读取Excel文件内容
- 【Taro开发】四月芳菲,Taro观赏指南
- 【Node.js】青梅煮酒,聊聊zlib压缩
- 【知识点】关于iframe跨域通信