js 网格卡片交换动画

原创

已于 2022-12-07 11:06:31 修改 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-12-06 16:36:17 首次发布

请添加图片描述

关键技术：animate(keyframes, options)
keyframes 关键帧对象数组，或一个关键帧对象（其属性为可迭代值的数组）
代表动画持续时间的整数（以毫秒为单位），或者一个包含一个或多个时间属性
参考传送门

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
     
     
      padding: 0;
      margin: 0;
    }
    .box {
     
     
      position: relative;
    }
    .box div {
     
     
      position: