likes
comments
collection
share

一点点js和一点点css实现霓虹字体

作者站长头像
站长
· 阅读数 56

世界上不缺少美 只是缺少发现美的眼睛

前情提要

每个前端er在下定决心从事前端工作的时候，或许是被高薪迷蒙了双眼，或许是偏爱酷炫的css样式，又或许是喜欢寻根问底的那种成就感，不管怎样，到了现在，你们的初心还在吗？笔者一开始就是被酷炫的css特效所吸引入行的，一个个冰冷的代码，组合起来之后居然可以呈现出那么让人热血澎湃的效果，也许这就是前端的魅力吧，本文就带大家一起，重温css的野性之美--实现一个动态霓虹字体，本文需要少量的js知识以及少量的css的知识，效果酷炫，难度却不高，请放心食用。

静态版

酷炫字体的生成当然离不开我们的css样式，首先，我们需要绘制一个一个的正方形盒子，来放置我们的字体，然后点击字体呈现霓虹灯的效果，这里需要用到一个hue-rotate滤镜，稍后我们细说

  • 以body为容器，这里用到的就是之前讲过的flex布局实现垂直和水平居中,将承载我们盒子的容器放进去
body {
  padding: 0;
  margin: 0; 
  height: 100vh;
  background: #18191f;
  display: flex;
  justify-content: center;
  align-items: center;
}
#box {
  position: relative;
  display: flex;
}
<body>
  <!-- <input type="text"  id="text"> -->
  <div id="box">
  </div>
</body>
  • 正方体盒子 这里我们想要通过点击字体来实现霓虹灯效果，这里有两种办法，一种是通过js，给我们的盒子添加点击事件，然后去添加/移除我们的样式类名，一种是通过css来实现，有人可能在想了，css还能监听事件？答案是当然不能了，所以我们需要取巧一点，这里我们需要用到css3的一个属性选择器，添加/移除 像是一个开关一样，那么什么东西可以描述呢？原生元素里有checkbox和radio两种都可以表示开关状态，这里我们采用的checkbox类型，有人又要问了，checkbox不是个框吗，怎么能控制文字呢？这里又需要用到一个css3的选择器，叫做相邻元素选择器，talk is cheap let me show the code
// 让checkbox在上面，与文字重叠起来，这样我们才能选中
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 80px;
  width: 80px;
  z-index: 100;
}
// 边框通过阴影的方式来实现，这里采用了多层阴影来模拟立体的浮雕效果，颜色请自行探索
.item {
  position: relative;
  height: 80px;
  width: 80px;
  background: #18191f;
  color: #555;
  font-size: 46px;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  margin: 0 4px;
  border-radius: 20px;
  box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.05),
    4px 4px 6px rgba(0, 0, 0, 0.2),
    inset -1px -1px 4px rgba(255, 255, 255, 0.05),
    inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}
// :checked伪类选择器 + 相邻元素选择器 实现对文字的操作，文字操作的核心是grow动画内的滤镜效果
input[type="checkbox"]:checked ~ div {
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.05),
    inset 4px 4px 6px rgba(0, 0, 0, 0.2);
  color: yellow;
  text-shadow: 0 0 15px yellow, 0 0 25px yellow;
  animation: glow 1.5s ease-in-out infinite;
}

@keyframes glow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
<div id="box">
  <div class="child">
    <input type="checkbox" />
    <div class="item">掘</div>
  </div>
</div>
  • 滤镜 hue-rotate 这是一个色调旋转滤镜，注意的是，hue-rotate会丢失亮度的变化，因为hue-rotate在调整色调的时候不会调整亮度，通过这个滤镜结合动画，我们就能做出变幻的霓虹效果

动态版

看到这里有人可能就要大呼标题党了，难道每次我还得写dom结构么？所以这里需要小小的用到一点js的知识，input元素是用来接收用户输入的，我们借助input和它的onchange事件，就可以动态的操作变换字体了,下面采用的动态拼接模板字符串的方式，假如你愿意，也可以写成动态创建元素的方式

转载自:https://juejin.cn/post/7151402031956115492
评论
请登录