HTML5 + CSS3模拟庆余年中“五竹”的镭射眼动画特效

经海路大白狗

已于 2024-05-20 09:19:14 修改

阅读量429

点赞数 15

分类专栏： CSS3动画特效文章标签： css3 前端 css 动画庆余年2

于 2024-05-18 15:14:09 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/139025492

版权

CSS3动画特效专栏收录该内容

27 篇文章 17 订阅

订阅专栏

庆余年2已经火热开播了，据说反响强烈啊，不知道这一部里面，五竹的镭射眼会不会表现出来，我还挺想看看他的镭射眼的，我看到底有没有杀死剧中的庆帝。

回想第一部，我都快记不清那是几年前开播的了，过会儿我们用js-tool-big-box算一下，庆余年第一步开播到现在有多久了。先来用CSS3实现一下五竹的镭射眼吧。

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秒之前

经海路大白狗

关注

15
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
18
评论
HTML5 + CSS3模拟庆余年中“五竹”的镭射眼动画特效

庆余年2已经火热开播了，据说反响强烈啊，不知道这一部里面，五竹的镭射眼会不会表现出来，我还挺想看看他的镭射眼的，我看到底有没有杀死剧中的庆帝。回想第一部，我都快记不清那是几年前开播的了，过会儿我们用算一下，庆余年第一步开播到现在有多久了。先来用CSS3实现一下五竹的镭射眼吧。
复制链接

扫一扫