【文字特效】用css3画割裂和抖动的文字效果

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

前言

css技术专栏做了很多动画效果了，但是还没有一个文字效果的文章，今天就来做一个文字效果的集锦吧。

文章中会把你想用的文字效果源码都附上，直接复制粘贴就能使用。

割裂文字

😉 割裂文字顾名思义就是从中间来一刀，把文字切成两半

<section class="wrapper">
    <div class="top">蜡笔小心</div>
    <div class="bottom" aria-hidden="true">蜡笔小心</div>
</section>

🤨 我们不能直接把一段文字切割出去，所以我们需要分成两层样式去写

aria-hidden="true" 表示对当前浏览器进行隐藏，因为我们会把下层文字当做装饰去使用，为了避免产生混淆，需要进行隐藏处理。

* {
    box-sizing: border-box;
}
:root {
    --background-color: black;
    --text-color: hsl(0, 0%, 100%);
}
body {
    margin: 0;
}
.wrapper {
    display: grid;
    place-content: center;
    background-color: var(--background-color);
    min-height: 100vh;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.5rem, 1rem + 18vw, 15rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
}

• 基础样式，主要是设置页面背景和文字样式

.wrapper>div {
    grid-area: 1/1/-1/-1;
}

• 设置div的网格元素大小和位置

grid-area 属性指定网格元素在网格布局中的大小和位置，是以下属性的简写属性：

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

值	描述
grid-row-start	指定在哪一行开始显示网格元素。
grid-column-start	指定在哪一列开始显示网格元素。
grid-row-end	指定哪一行停止显示网格元素，或跨越多少行。
grid-column-end	指定哪一列停止显示网格元素，或跨越多少列。
itemname	指定网格元素名称

.top {
    clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}

• 设置切割上面的文字，切割之后生成一个可显示区域，区域之内的显示，之外的就隐藏掉。

.bottom {
    clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
    color: transparent;
    background: -webkit-linear-gradient(177deg, black 53%, var(--text-color) 65%);
    background: linear-gradient(177deg, black 53%, var(--text-color) 65%);
    background-clip: text;
    transform: translateX(-0.02em);
}

• 下面的文字同样需要进行切割
• 下面的文字使用 translateX 方法设置水平方向上的移动，这样就可以形成割裂的效果。

跳动的文字

🤨 非跳舞似的，而是上下左右抖动的文字

<h1>
    <span>J</span>
    <span>U</span>
    <span>E</span>
    <span>J</span>
    <span>I</span>
    <span>N</span>
</h1>

• 把需要跳动的文字拆分出来

html, body {
  height: 100%;
}

body {
  background: #ffeddc;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

h1 {
  font-size: 7em;
}

• 先来点基础样式设置背景和文字

h1 span {
  display: inline-block;
  animation: shake 0.2s ease-in-out infinite;
}
@keyframes shake {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(3px);
  }
}

• 设置每一个文字都是做垂直方向运动的效果

h1 span:nth-child(2) {
  animation-delay: 0.1s;
}

h1 span:nth-child(3) {
  animation-delay: 0.2s;
}

h1 span:nth-child(4) {
  animation-delay: 0.3s;
}

h1 span:nth-child(5) {
  animation-delay: 0.4s;
}

h1 span:nth-child(6) {
  animation-delay: 0.5s;
}

• 设置每一个文字抖动的开始时间
• animation-delay 就是设置当前文字从某一时刻开始执行动画效果

span:nth-child(1) {
  color: #FFFD82;
  text-shadow: 1px 1px grey, 3px 3px yellow, 4px 4px grey;
}

span:nth-child(2) {
  color: #00C2D1;
  text-shadow: 1px 1px grey, 3px 3px blue, 4px 4px grey;
}

span:nth-child(3) {
  color: #F6AF65;
  text-shadow: 1px 1px grey, 3px 3px darkorange, 4px 4px grey;
}

span:nth-child(4) {
  color: #ED33B9;
  text-shadow: 1px 1px grey, 3px 3px deeppink, 4px 4px grey;
}

span:nth-child(5) {
  color: #2CA58D;
  text-shadow: 1px 1px grey, 3px 3px green, 4px 4px grey;
}

• 最后给每一个文字都设置一个不同的颜色和阴影效果。

总结一下

文章中的代码都可以直接复制过去使用的哦，就连基础代码都放出来了。