过渡动画css3 效果+实现思路 -2

最新推荐文章于 2025-11-23 20:23:18 发布

原创最新推荐文章于 2025-11-23 20:23:18 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画

这篇博客演示了一个基于JavaScript的动态文字效果项目。通过CSS样式和JavaScript脚本，实现了文字逐字显示、动画滑入以及点击按钮重新加载的效果。代码中运用了关键帧动画、元素动态创建和删除等技术，为网页增添交互性。

效果图

在这里插入图片描述
项目demo链接

实习思路


<div>
  <div class="demo"></div>
  <div class="btn" onclick="reload()">again</div>
</div>

<style>
  @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
  body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #222;
  }

  .btn {
    color: #333;
    background: #fff;
    padding: 5px;
    width: 50px;
    border-radius: 10px;
    margin: 5px auto;
  }

  .demo {
    position: relative;
    display: flex;
    color: #6ee1f5;
    font-size: 2em;
    font-family: Raleway, sans-serif;
    letter-spacing: 3px;
    /** 转大写 */
    text-transform: uppercase;
    white-space: pre;
  }

  .demo span {
    opacity: 0;
    transform: scale(0);
    /** forwards当动画完成后，保持最后一帧的状态 */
    animation: fadeIn 2.4s forwards;
  }

  .demo span::before {
    left: 50%;
    animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }

  .demo span::after {
    right: 50%;
    animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideLeft {
    to {
      left: -6%;
      opacity: 1;
      transform: scale(0.9);
    }
  }

  @keyframes slideRight {
    to {
      right: -6%;
      opacity: 1;
      transform: scale(0.9);
    }
  }
</style>

<script>
  function start() {
    /** 基础延迟 */
    const delay = 0.3;
    let text = 'need for speed';
    let letters = text.split('');
    let target = document.getElementsByClassName('demo')[0];
    /** 找中间值 排出空格  */
    let middle = letters.filter((e) => e !== ' ').length / 2;
    letters.forEach((item, index) => {
      /** 创建span 元素 */
      let span = document.createElement('span');
      /** 设置文本值 */
      span.textContent = item;
      /** 设置动画延迟  */
      span.style.animationDelay = `${delay + Math.abs(index - middle) * 0.1}s`;
      /** 元素放到target 上 */
      target.append(span);
    });
  }

  /** 清空节点 */
  function clear() {
    let target = document.getElementsByClassName('demo')[0];
    const childs = target.childNodes;
    while (target.hasChildNodes()) {
      target.removeChild(target.firstChild);
    }
  }

  function reload() {
    clear();
    start()
  }

  start();
</script>