不需要任何插件，纯 CSS 就能打造炫酷文字特效-Toy模板网

这篇具有很好参考价值的文章主要介绍了不需要任何插件，纯 CSS 就能打造炫酷文字特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一些文字上面的动画效果，下面一起看看吧。

1. 文字抖动

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

实现思路

其实主要就是通过 animation 添加动画属性，利用 keyframes 来描述动画的开始、过程和结束的状态，核心就是 animation + transform:rotate，话不多说，下面直接看代码。

完整源码

<template>
  <div class="parentBox">
    <div class="contantBox">文字抖动</div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  @keyframes cartoon {
    2% {
      transform: translate(6px, -2px) rotate(3.5deg);
    }

    4% {
      transform: translate(5px, 8px) rotate(-0.5deg);
    }

    6% {
      transform: translate(6px, -3px) rotate(-2.5deg);
    }

    8% {
      transform: translate(4px, -2px) rotate(1.5deg);
    }

    10% {
      transform: translate(-6px, 8px) rotate(-1.5deg);
    }

    12% {
      transform: translate(-5px, 5px) rotate(1.5deg);
    }

    14% {
      transform: translate(4px, 10px) rotate(3.5deg);
    }

    16% {
      transform: translate(0px, 4px) rotate(1.5deg);
    }

    18% {
      transform: translate(-1px, -6px) rotate(-0.5deg);
    }

    20% {
      transform: translate(6px, -9px) rotate(2.5deg);
    }

    22% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }

    24% {
      transform: translate(-9px, 6px) rotate(-0.5deg);
    }

    26% {
      transform: translate(8px, -2px) rotate(-1.5deg);
    }

    28% {
      transform: translate(2px, -3px) rotate(-2.5deg);
    }

    30% {
      transform: translate(9px, -7px) rotate(-0.5deg);
    }

    32% {
      transform: translate(8px, -6px) rotate(-2.5deg);
    }

    34% {
      transform: translate(-5px, 1px) rotate(3.5deg);
    }

    36% {
      transform: translate(0px, -5px) rotate(2.5deg);
    }

    38% {
      transform: translate(2px, 7px) rotate(-1.5deg);
    }

    40% {
      transform: translate(6px, 3px) rotate(-1.5deg);
    }

    42% {
      transform: translate(1px, -5px) rotate(-1.5deg);
    }

    44% {
      transform: translate(10px, -4px) rotate(-0.5deg);
    }

    46% {
      transform: translate(-2px, 2px) rotate(3.5deg);
    }

    48% {
      transform: translate(3px, 4px) rotate(-0.5deg);
    }

    50% {
      transform: translate(8px, 1px) rotate(-1.5deg);
    }

    52% {
      transform: translate(7px, 4px) rotate(-1.5deg);
    }

    54% {
      transform: translate(10px, 8px) rotate(-1.5deg);
    }

    56% {
      transform: translate(-3px, 0px) rotate(-0.5deg);
    }

    58% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }

    60% {
      transform: translate(6px, 9px) rotate(-1.5deg);
    }

    62% {
      transform: translate(-9px, 8px) rotate(0.5deg);
    }

    64% {
      transform: translate(-6px, 10px) rotate(0.5deg);
    }

    66% {
      transform: translate(7px, 0px) rotate(0.5deg);
    }

    68% {
      transform: translate(3px, 8px) rotate(-0.5deg);
    }

    70% {
      transform: translate(-2px, -9px) rotate(1.5deg);
    }

    72% {
      transform: translate(-6px, 2px) rotate(1.5deg);
    }

    74% {
      transform: translate(-2px, 10px) rotate(-1.5deg);
    }

    76% {
      transform: translate(2px, 8px) rotate(2.5deg);
    }

    78% {
      transform: translate(6px, -2px) rotate(-0.5deg);
    }

    80% {
      transform: translate(6px, 8px) rotate(0.5deg);
    }

    82% {
      transform: translate(10px, 9px) rotate(3.5deg);
    }

    84% {
      transform: translate(-3px, -1px) rotate(3.5deg);
    }

    86% {
      transform: translate(1px, 8px) rotate(-2.5deg);
    }

    88% {
      transform: translate(-5px, -9px) rotate(2.5deg);
    }

    90% {
      transform: translate(2px, 8px) rotate(0.5deg);
    }

    92% {
      transform: translate(0px, -1px) rotate(1.5deg);
    }

    94% {
      transform: translate(-8px, -1px) rotate(0.5deg);
    }

    96% {
      transform: translate(-3px, 8px) rotate(-1.5deg);
    }

    98% {
      transform: translate(4px, 8px) rotate(0.5deg);
    }

    0%,
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }
  .contantBox {
    color: #fff;
    animation: cartoon 5s infinite ease-in-out;
  }
}
</style>

2. 文字缩放

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

实现思路

实现的思路核心在于 scale3d 属性让其变形，配合 animation-timing-function 属性指定动画完成的周期实现该效果。

完整源码

<template>
  <div class="parentBox">
    <div class="contantBox">文字缩放</div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  @keyframes zoomMeans {
    40% {
      opacity: 1;
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
      opacity: 0;
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }
  .contantBox {
    animation: 2s linear 0s infinite alternate zoomMeans;
    font-weight: bold;
    color: white;
    font-size: 20px;
    text-align: center;
  }
}
</style>

3. 文字鼠标悬浮

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

实现思路

上图的效果实现起来其实就非常的简单了，我们只需要通过 hover 事件在鼠标触摸文字时设置其样式和效果即可。

完整源码

<template>
  <div class="parentBox">
    <h1>hello word!(鼠标悬浮特效)</h1>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  h1 {
    display: inline-block;
    color: white;
    font-size: 56px;
    transition: 0.5s;
    cursor: pointer;
  }

  h1:hover {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
      0 10px 0 #ccc, 0 11px 0 #ccc, 0 12px 0 #ccc,
      0 20px 30px rgba(0, 0, 0, 0.5);
  }
}
</style>

当然你还可以如下图这样⤵

不需要任何插件，纯 CSS 就能打造炫酷文字特效

完整源码

<template>
  <div class="parentBox">
    <h1>hello word!(鼠标悬浮特效)</h1>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
  height: 100%;
  background: rgb(31, 31, 31);
  padding: 100px;
  h1 {
    display: inline-block;
    color: #fff;
    cursor: pointer;
    -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent
          50%, rgba(255, 255, 255, 0.3));
    font: bold 50px/1.231 georgia, sans-serif;
    text-transform: uppercase;
  }
}
</style>

4. 文字动画下划线

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

完整源码

<template>
  <div>
    <h2 class="titleBox">
      <span>People who have no culture are not sad. Taste miss not often meet.</span>
    </h2>
  </div>
</template>
<style scoped>
.titleBox span {
  line-height: 1.5;
  padding-bottom: 4px;
  background: linear-gradient(to right, rgb(255, 64, 96), rgb(47, 216, 47))
    no-repeat right bottom;
  background-size: 0px 3px;
  transition: background-size 1200ms;
}
.titleBox span:hover {
  background-position-x: left;
  background-size: 100% 3px;
}
</style>

5. 文字穿透效果

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

完整源码

<template>
  <div>
    <div class="box">
      <h1>Hello word</h1>
    </div>
  </div>
</template>

<style scoped>
.box {
  background: rgba(0, 0, 0.7);
  width: 100%;
  height: 100%;
}

h1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
  text-stroke: 1px #fff;
  -webkit-text-stroke: 1px #fff;
  background: url("../../img/1.png")
    no-repeat center/cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>

6. 文字交融效果

实现效果

不需要任何插件，纯 CSS 就能打造炫酷文字特效

完整源码

<template>
  <div>
    <span>Hello word</span>
  </div>
</template>

<style scoped>
div {
  text-align: center;
  background: #000;
  filter: contrast(30);
}
span {
  font-size: 100px;
  color: #fff;
  animation: shadow 3s forwards;
}
@keyframes shadow {
  from {
    letter-spacing: -50px;
    filter: blur(10px);
  }
  to {
    letter-spacing: 10px;
    filter: blur(2px);
  }
}
</style>