foreword

Working overtime at night to catch up with work, when I walked out of the door of the company, the sky was full of stars. Getting on the bus to go home, the meaning of hardship struck.

The brain begins to empty, the consciousness begins to drift, and it feels like the road home has become very long. I subconsciously unlocked my phone to check the time, and then I couldn't help being attracted by the screen saver picture. My screen saver picture is the grassland I yearn for.

So, I started to play a small game of repeatedly unlocking and viewing the screen saver. I also gradually discovered some functional details of the mobile phone that I did not usually notice.

The display of the date, the dynamic effect of fingerprint unlocking, and the effect of moving up the application after unlocking can all be implemented with CSS. Things start to get interesting, inspiration comes, how can I let go easily, of course, open IDEA to realize it.

a longing picture

The sky is like a dome, covering the four fields.

The sky is blue, the wild is vast. The wind blows the grass and sees the cattle and sheep.

The yearning in my heart, the motivation to work, and the ideal life.

Code on the Nuggets

The complete code has been put into the nuggets on my code, and it is really convenient to preview the code effect online.https://code.juejin.cn/pen/7122117149866328077

feature design

button operability

According to the mobile phone operation experiment, it is not difficult to find that the button operability is related to the current screen state.

operate	screen goes off	screen lights up	the main screen
screen	❌	✅	❌
bright screen	✅	❌	✅
unlock	✅	❌	❌

Function realization

screen

The front camera is consistent, and it is composed of another cute little dot and ring;
After the screen is off, you can perform the screen-on operation, but cannot perform the unlocking operation.

ring effect

Implemented by pseudo-class

.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>
复制代码

bright screen

After the screen is lit, the mobile interface displays the date and the ocean ball.
You can perform the screen-off operation or the unlocking operation.

display date

The first line is the current week;
The second line is the current time and minute;
The third line is the current month and day;

Can be obtained through the Date object , simply list

getMonth(): Returns the month (0 ~ 11) from the Date object. So you need to +1 when you actually show it.

getDate(): Returns the day of the month (1 ~ 31) from the Date object.

getHours(): Returns the hours (0 ~ 23) of the Date object.

getMinutes(): Returns the minutes (0 ~ 59) of the Date object.

getDay(): Returns the day of the week (0 ~ 6) from a Date object. Corresponding to Sunday, Monday to Saturday.

Initialize date information method

// 初始化日期信息
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;
}
复制代码

Frosted Ocean Ball

常见的指纹解锁，一般通过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动画。
此时，只能进行息屏操作，不用再重复亮屏操作。

总结

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

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

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

"CSS special effects" is exclusive to my daze, repeatedly unlocking the phone screen