首页 前端知识 HTML5 CSS3模拟庆余年中“五竹”的镭射眼动画特效

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

2024-05-23 20:05:49 前端知识 前端哥 779 75 我要收藏

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

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

目录

1 实现思路

2 所需技术素材

3 源代码

4 现在距离庆余年第一部过去多久了? 

4.1 安装引入

4.2 计算距离现在的时间


1 实现思路

眼睛的实现,五竹一直是蒙着眼睛的,所以谁也没有见过,据说看见了就得挂掉。所以,我们把他的眼睛想象的奇特一些。

镭射光柱的实现,试想一下,这个镭射,肯定是那种类似地下城与勇士那种光剑的实现效果,那才显得精彩,又或者像幻视那样也行。

镭射发射的动效实现,光有个镭射光剑还不行,还需要有个镭射前进的过程,这样才更有威力,庆帝被击中才更痛苦。

2 所需技术素材

HTML5 + CSS3的预备素材有:

  1. 用于展示眼睛和镭射的2个DIV
  2. 整体背景的色值,background,布局,display,布局的居中效果 justify-content等;
  3. 眼部的实现呢,为了表现五竹的威猛,我们把眼睛朝下倾斜,transform: rotate,威力值添加 box-shadow
  4. 镭射眼的实现,色值线性渐变,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秒 之前

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9117.html
标签
庆余年2
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!