庆余年2已经火热开播了，据说反响强烈啊，不知道这一部里面，五竹的镭射眼会不会表现出来，我还挺想看看他的镭射眼的，我看到底有没有杀死剧中的庆帝。
回想第一部，我都快记不清那是几年前开播的了，过会儿我们用js-tool-big-box算一下，庆余年第一步开播到现在有多久了。先来用CSS3实现一下五竹的镭射眼吧。
目录
1 实现思路
2 所需技术素材
3 源代码
4 现在距离庆余年第一部过去多久了？
4.1 安装引入
4.2 计算距离现在的时间
1 实现思路
眼睛的实现，五竹一直是蒙着眼睛的，所以谁也没有见过，据说看见了就得挂掉。所以，我们把他的眼睛想象的奇特一些。
镭射光柱的实现，试想一下，这个镭射，肯定是那种类似地下城与勇士那种光剑的实现效果，那才显得精彩，又或者像幻视那样也行。
镭射发射的动效实现，光有个镭射光剑还不行，还需要有个镭射前进的过程，这样才更有威力，庆帝被击中才更痛苦。
2 所需技术素材
HTML5 + CSS3的预备素材有：
- 用于展示眼睛和镭射的2个DIV；
- 整体背景的色值，background，布局，display，布局的居中效果 justify-content等；
- 眼部的实现呢，为了表现五竹的威猛，我们把眼睛朝下倾斜，transform: rotate，威力值添加 box-shadow；
- 镭射眼的实现，色值线性渐变，linear-gradient，镭射发射动画，animation等。
3 源代码
废话不多说，上源代码，赶紧感受一下镭射的威力吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3模拟五竹的镭射眼</title>
<style>
* {
box-sizing: border-box;
}
body {
align-items: center;
background: #1a1a1a;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
width: 100vw;
}
.eye {
height: 5%;
width: 4%;
position: absolute;
left: 0;
border-radius: 25%;
top: 42%;
z-index: 10;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
background: #fff;
box-shadow: 0 0 40px 5px #9bf, 0 0 2px 2px #b3ccff inset;
}
.ligth {
content: '';
position: absolute;
top: 20%;
left: 0;
height: 60%;
width: 5vw;
background: linear-gradient(0deg, #9bf, #cfdefc, #9bf), #cdf;
-webkit-filter: blur(6px);
filter: blur(6px);
box-shadow: 0 0 20px 5px #9bf, 0 0 80px 2px #9bf;
animation: eye 4s infinite;
}
@keyframes eye{
0% {width: 5vw;}
100% {width: 100vw;}
}
</style>
</head>
<body>
<div class="eye">
<div class="ligth"></div>
</div>
</body></html>
4 现在距离庆余年第一部过去多久了？
我们知道，庆余年第一步播出时间是2019-11-26，如果口算肯定不能一下特别精准的算出，这就体现出代码的有用之处了，正好js-tool-big-box有这个能力，赶紧来试试。
4.1 安装引入
执行npm命令
npm i js-tool-big-box
项目中引入timeBox对象，这是用于时间日期的对象，代码如下：
import { timeBox } from 'js-tool-big-box';4.2 计算距离现在的时间
使用的是timeBox这个对象，对象下面有getDistanceNow方法用于计算距离现在的时间，看一下代码：
created() {
const unitObj = {
beforeUnit: '之前',
yearUnit: '年 ',
monthUnit: '月 ',
dateUnit: ' 日 ',
hourUnit: '时 ',
minutesUnit: '分 ',
secondUnit: '秒 '
}
const showData = timeBox.getDistanceNow('2019-11-26 08:00:00', unitObj); // 庆余年第一部播出啦
console.log('庆余年第一部播出于：', showData.fullDateTime);
},打印结果： 庆余年第一部播出于： 4年 5月 23日 7时 11分 31秒 之前
