CSS3实现字符跳动与颜色渐变

star-cloud

已于 2024-05-13 08:50:20 修改

阅读量312

点赞数 8

文章标签： css3 前端动画 css html5

于 2024-05-09 15:54:20 首次发布

本文链接：https://blog.csdn.net/m0_74049496/article/details/138617424

版权

html

<p>小小的世界，大大的梦想</p>
<div class="dance">
    <span class="word">l</span>
    <span class="word">o</span>
    <span class="word">c</span>
    <span class="word">a</span>
    <span class="word">l</span>
    <span class="word">h</span>
    <span class="word">o</span>
    <span class="word">s</span>
    <span class="word">t</span>
    <span class="word">:</span>
    <span class="word">8</span>
    <span class="word">0</span>
    <span class="word">8</span>
    <span class="word">0</span>
</div>

css3

p {
  font-size: xx-large;
  background: -webkit-linear-gradient(135deg,
        #0eaf6d,
        #ff6ac6 25%,
        #147b96 50%,
        #e6d205 55%,
        #2cc4e0 60%,
        #8b2ce0 80%,
        #ff6384 95%,
        #08dfb4);
  /* 文字颜色填充设置为透明 */
  -webkit-text-fill-color: transparent;
  /* 背景裁剪，即让文字使用背景色 */
  background-clip: text;
  /* 背景图放大一下，看着柔和一些 */
  background-size: 200% 100%;
  /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
  animation: flowCss 12s infinite linear;
}
.dance {
    align-items: center;
    justify-content: center;
    font-size: xx-large;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    margin-left: 20px;
  }

  .word {
    /* alternate 轮流反向播放 A--B--A--B... 必须要加 */
    animation: dance 0.72s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
    display: inline-block;
    transform: translate3d(0, 0, 0);
    font-size: xx-large;
    text-decoration: underline;
    color: #75b9ff;
    margin-right: 1px;
  }

  .word:nth-child(1) {
    animation-delay: 0s;
  }

  .word:nth-child(2) {
    animation-delay: 0.0333333333s;
  }

  .word:nth-child(3) {
    animation-delay: 0.1333333333s;
  }

  .word:nth-child(4) {
    animation-delay: 0.2333333333s;
  }

  .word:nth-child(5) {
    animation-delay: 0.3333333333s;
  }

  .word:nth-child(6) {
    animation-delay: 0.4333333333s;
  }

  .word:nth-child(7) {
    animation-delay: 0.5333333333s;
  }

  .word:nth-child(8) {
    animation-delay: 0.6333333333s;
  }

  .word:nth-child(9) {
    animation-delay: 0.7333333333s;
  }

  .word:nth-child(10) {
    animation-delay: 0.8333333333s;
  }

  .word:nth-child(11) {
    animation-delay: 0.9333333333s;
  }
  .word:nth-child(12) {
    animation-delay: 1.0333333333s;
  }
  .word:nth-child(13) {
    animation-delay: 1.1333333333s;
  }
  .word:nth-child(14) {
    animation-delay: 1.2333333333s;
  }

  @keyframes dance {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(0, -0.54em, 0);
    }
  }