前言

現(xiàn)如今網(wǎng)頁越來越趨近于動畫，相信大家平時瀏覽網(wǎng)頁或多或少都能看到一些動畫效果，今天我們來做一些文字上面的動畫效果，下面一起看看吧。

1. 文字抖動

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

其實(shí)主要就是通過 animation 添加動畫屬性，利用 keyframes 來描述動畫的開始、過程和結(jié)束的狀態(tài)，核心就是 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. 文字縮放

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

實(shí)現(xiàn)的思路核心在于 scale3d 屬性讓其變形，配合 animation-timing-function 屬性指定動畫完成的周期實(shí)現(xiàn)該效果。

完整源碼

<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. 文字鼠標(biāo)懸浮

實(shí)現(xiàn)效果

實(shí)現(xiàn)思路

上圖的效果實(shí)現(xiàn)起來其實(shí)就非常的簡單了，我們只需要通過 hover 事件在鼠標(biāo)觸摸文字時設(shè)置其樣式和效果即可。

完整源碼

<template>
  <div class="parentBox">
    <h1>hello word!(鼠標(biāo)懸浮特效)</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>

當(dāng)然你還可以如下圖這樣?

完整源碼

<template>
  <div class="parentBox">
    <h1>hello word!(鼠標(biāo)懸浮特效)</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. 文字動畫下劃線

實(shí)現(xiàn)效果

完整源碼

<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. 文字穿透效果

實(shí)現(xiàn)效果

完整源碼

<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. 文字交融效果

實(shí)現(xiàn)效果

完整源碼

<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>

持續(xù)更新中...文章來源地址http://www.zghlxwxcb.cn/news/detail-429269.html

到了這里，關(guān)于不需要任何插件，純 CSS 就能打造炫酷文字特效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！