序言

大年十一，复工第三天。闲来无事逛论坛，看到一篇很有意思的文章，《当一个摆子前端太闲的时候会做什么》跟着作者敲了一下，从这个趣味性极强的demo中也给了我一些启发，这里写随笔记录一下。不讲实现，有兴趣的朋友，可以看原文。在做知识点记录的时候，也参考了其他大佬的文章，在这里了表示感谢，以下是我参考的文章链接：

零散知识点记录

接触前端半年，对一些细小的知识点不清楚，因此，也在随笔中予以记录。

::before和::after伪元素

这里大佬用css绘制了眼眶的外圈和内圈，添加内嵌阴影效果。如果让我自己来写，我可能会直接使用三层div嵌套去添加样式。虽然也能达到效果，但模块代码就过于臃肿，降低了可读性。

图片.png

::before和::after是什么?

::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。

应用

以下我汇总了::before和::after的几个常见应用，以便后续参考：

前后添加内容，如符号，字符串，图片，等等。
替换内容，有些情况可以不使用::before或::after。
清除浮动。（浮动元素会脱离文档流，可能造成父元素高度塌陷，可使用伪元素清除浮动。）

关键帧动画@keyframes动画

动画是我觉得css很大的一个难点，每次写动画都是一件头疼的事。CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。以下的动画可以实现大眼的放大、缩小，模拟呼吸效果。

/* ...睡眠 */
.eyeSocketSleeping {
  animation: sleeping 6s infinite;
}
@keyframes sleeping {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

svg滤镜

svg滤镜的使用方法有很多，可能我需要去看专门的课去学习，不得不感慨实在功能强大。贴一下大佬的项目应用

<template>
  <div class="eyeSocket eyeSocketSleeping" ref='bigEye' @click="clickToWeakup" @animationend="reset">
    <div id="eyeball" ref="eyeball"></div>
  </div>
  <div class="filter">
    <div class="eyeSocket" id='eyeFilter' ref="eyeFilter">
    </div>
  </div>
  <!-- Svg滤镜 -->
  <svg width="0">
    <filter id='filter'>
      <feTurbulence baseFrequency="1">
        <animate id="animate1" attributeName="baseFrequency" dur="1s" from="0.5" to="0.55" begin="0s;animate1.end">
        </animate>
        <animate id="animate2" attributeName="baseFrequency" dur="1s" from="0.55" to="0.5" begin="animate2.end">
        </animate>
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B" />
    </filter>
  </svg>
</template>

<style scoped>
/* 其他css */
/* 大眼替身 */
.filter {
  width: 100%;
  height: 100%;
  filter: url('#filter');
  /* 开启滤镜 */
}
<style>

下面是效果，是不是特别好看.

图片.png

编程思维

作为一个前端菜狗，经常面对大佬的代码发出由衷的感叹：“哦呦，这个叼，这个叼!”,大佬的思维确实有很多值得学习的地方。

灵活使用轮子

前端技术栈多种多样，容易形成思维定式。echart用来画数据图表，但大佬用echats画大眼的眼瞳，属实组合起来会有新的体验。

热爱自己的工作

大佬编程是在创造生命，通过一行行枯燥的代码给普普通通的div赋予了各种行为，于是有趣的鼠标精灵就诞生了。从自己的工作中寻找乐趣，热爱是最好的老师。加油！

项目笔记第二篇-鼠标精灵

序言