CSS动画1----- 方块沿盒子边缘移动_前端盒子动画滚动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/pig_is_duck/article/details/106463006

本文介绍使用CSS动画实现方块沿盒子边缘移动的两种方法，包括初步版和多个动画叠加版，展示了如何通过关键帧设置移动路径、颜色变化及圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习链接：B站视频

一、方块沿盒子边缘移动（初步版）

演示

在这里插入图片描述

代码

<body>
    
  <main>
    <div></div>
  </main>
    
</body>

    main {
      width: 400px;
      height: 400px;
      border: 1px solid #ddd;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: #2980b9;
      animation-name: hd;   /* 设置关键帧的名字为 hd */
      animation-duration: 4s; /* 设置动画持续时间 */
    }

    @keyframes hd {  /* 定义关键帧 */
      25% {
        transform: translateX(300px);  /* 偏移坐标 */
      } 
      50% {
        transform: translate(300px, 300px);
      }
      75% {
        transform: translateY(300px);
      }
    }

二、方块沿盒子边缘移动（多个动画叠加版）

演示

在这里插入图片描述

代码

<body>
    
  <main>
    <div></div>
  </main>
    
</body>

    main {
      width: 400px;
      height: 400px;
      border: 1px solid #ddd;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: #2980b9;
      animation-name: hd, background, radius;  /* 添加三个动画帧 */
      animation-duration: 4s, 2s, 2s;  /* 设置动画持续时间 */
    }

    @keyframes hd {  /* 定义关键帧: 移动 */
      25% {
        transform: translateX(300px);  /* 偏移坐标 */
      } 
      50% {
        transform: translate(300px, 300px);
      }
      75% {
        transform: translateY(300px);
      }
    }

    @keyframes background { /* 定义关键帧:颜色 */
      25% {
        background-color: #2ecc71;
      } 
      50% {
        background-color: #f1c40f;
      }
      75% {
        background-color: #8e44ad;
      }
    }

    @keyframes radius { /* 定义关键帧: 圆角 */
      25% {
        border-radius: 50%;
      } 
      50% {
        border-radius: 0;
      }
      75% {
        border-radius: 50%;
      }
    }