我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看效果

赛博朋克风格gif

实现思路

先实现一个简单背景，方便看效果
我们假设鼠标移动上去之后触发赛鹏博客风格的动画
- 用:hover伪类
接下来就是赛鹏博客风格的具体思路
首先，要看到样式抖动且不影响主题内容展示，则需要有两份完全一样的dom，分为主体dom和副本dom
保持主体dom不动
然后让副本dom进行颤抖+关键部分颜色小幅度范围内跳动

怎样实现颤抖效果呢
- 需要有动画
- 动画伴随有位置变化
  - 用animation加translate
- 动画改变应该是立即变化而不是过渡渐变
  - 需要借助animation的animation-timing-function:steps(n, <jumpterm>)来实现
    - animation-timing-function表示动画的移动轨迹
      - 比如我们熟悉的ease、linear、linear、cubic-bezier（赛贝尔曲线）等等
      - steps(n, <jumpterm>)可以将一个动画周期分隔成不同的步骤
        
        n表示将一个动画周期分成了几分
        
        比如n为5，则意味着将动画周期分成了五份
        
        n为1，则将动画分成了1分，也就是一瞬间完成了整个动画，这就是我们要的没有过渡的效果
        
        jumpterm表示保留每一份动画的部分
        
        比如jump-start表示保留动画的开头
        
        jump-end表示动画的结尾
  - 那其实我们需要的就是steps(1, jump-start)或steps(1, jump-end)。也可以写成step-start或step-end
- 改变位置时不应该影响主体dom的大体展示
  - 因为我们的主体dom为矩形，假设有副本dom往右上偏移了，我们视觉上会是看到的是主体dom像右上方向长宽长高了，这不是我们要的
  - 我们需要有割裂的感觉
  - 比如副本dom的某一部分往右上偏移，而不是整体右上偏移
  - 这就需要借助clip-path属性
  - 该属性意思是裁切，比如，以下是一张150*183的图片
    
    原图：
    
    裁剪代码：
```
clip-path: circle(40%);
```
    裁减了60%的体积
    
    又比如
    
    裁剪代码
```
clip-path: inset(75px 40px 0px 0);
```
    - 这里又有一个inset的用法
      - 其实inset就是top,right,bottom,left的缩写
      - 以上表示上面裁剪75px，右边裁剪40px，下和左不裁剪
实现了颤抖的效果，又怎样实现关键部分颜色小幅度范围内跳动的效果呢？
- 我们选择关键部位为中间字体
- 颜色跳动可以分解成多个颜色和颤抖
  - 多个颜色可以由text-shadow生成，可以设置不止一个文字背景，且偏移量也可以随便设置
    - 因为要hover的时候才展示颜色抖动，所以需要未hover的时候visibility: hidden
    - hover时再visibility: visible
    - 为什么副本dom本身不需要visibility: hidden呢？因为副本dom本身样式跟主体dom完全一样，所以哪怕不hidden也没关系
  - 颤抖如上面所说，animation+translate
这样就完成了所有赛鹏风格的样式

接下来来看具体实现

具体实现

html基础结构

<div class="anniu">Aurora Borealis night</div>

比较简单，我们只需要用div来做主体dom

用div::afetr来做副本dom即可

背景样式

先来个背景样式

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(243, 239, 8);
}

主体dom样式和副本dom样式

.anniu,
.anniu::after {
  font-family: 'Do Hyeon', sans-serif;
  width: 260px;
  height: 80px;
  text-align: center;
  font-size: 22px;
  line-height: 80px;
  color: rgb(255, 251, 251);
  background: linear-gradient(30deg, transparent 10%, rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
  box-shadow: 5px 0 0 rgb(0, 204, 255);
  cursor: pointer;
  position: relative;
}

鼠标移动添加动画

.anniu:hover::after {
  animation: san 1s;
  animation-timing-function: steps(1, end);
}

赛鹏博客风格的动画

0% {
  clip-path: inset(20% -5px 60% 0);
  transform: translate(-6px, 5px);
   visibility: visible;
}
10% {
  clip-path: inset(50% -5px 30% 0);
  transform: translate(6px, -5px);
}
/* ...一直到100% */

完整代码

总结

关键点在

生成主体dom和副本dom，保持主体dom不变，只改动副本dom，由此来整体样式不凌乱
animation-timing-function: steps(1, end)实现动画不保留过渡
clip-path: inset(20% -5px 60% 0);裁切副本dom造成颤抖效果

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

学习自老哥北极光之夜，感兴趣的可以去了解下。

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

纯css实现赛博朋克风格

前言

正文