古灵精怪的万圣节漂浮七彩南瓜灯效果

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

万圣节是西方的鬼节，与咱们在鬼节寄托哀思不同，在宗教文化浓厚的西方，万圣节是纪念西方万圣的，而且氛围也比较欢乐些，小孩子还会扮作鬼怪讨糖果，今天就实现一个古灵精怪的万圣节·漂浮·跳跃·七彩·古灵精怪·抓不着·南瓜灯

万圣节·漂浮·跳跃·七彩·古灵精怪·抓不着·南瓜灯

顾名思义，我们要实现的南瓜灯，至少具备下面的特性

• 漂浮 通过transform:translate 或者设置top实现
• 跳跃 通过animation 实现
• 七彩 通过filter:hue-rotate实现
• 古灵精怪 这个，找个古灵精怪的南瓜头就行
• 抓不着 需要一点点的css 当鼠标移动时，更新南瓜灯的位置

实现一下

首先我们需要一个古灵精怪的南瓜怪图片,下面这张就不错。

然后我们通过css来实现漂浮，南瓜怪图片我们作为南瓜灯的背景图,通过内阴影来模拟发光效果

html,body{
  background: #000;
}
 #app{
  width: 300px;
  height: 300px;
  background-size: contain;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  box-shadow: inset 0 0 25px #fff;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0159ff5542d6e80000019ae92ce64a.jpg%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669370384&t=6cde683c4caeca63087e3572e8ccb4d6');
}
<div id="app"></div>

跳跃我们通过动画的方式实现,在Y轴方向平移变换即可

@keyframes hue {
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(30px);
  }
}

七彩，我们只需要在动画里假如反相滤镜动画即可

@keyframes hue {
  0%, 100%{
    transform: translateY(0);
    filter: hue-rotate(0deg);
  }
  50%{
    transform: translateY(30px);
    filter: hue-rotate(360deg);
  }
}

抓不着，这个，我们需要用到一点点的js，主要涉及事件注册，和js设置css属性

很简单，只需要给body注册鼠标移动事件，然后让南瓜灯的位置永远位于鼠标位置之外即可

document.body.onmousemove = function (e) {
  document.getElementById('app').style.top = e.pageX + Math.random() * 10 + 'px'
  document.getElementById('app').style.left = e.pageY + Math.random() * 10 + 'px'
}

码上掘金

老规矩