Web第二次笔记

爱泡脚的鸡腿2025-07-08 19:17

1.动画-animation

1.1 动画-单状态

必写：
@keyframes：关键帧

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   /* 定义动画:多状态*/
   @keyframes ani {
     from {
       background-color: red;
     }

     to {
       background-color: blue;
     }
   }

   /* 使用动画 （补帧动画：中间帧会系统自动补全）*/
   div {
     width: 200px;
     height: 200px;
     border: 1px solid #000;
     margin: 100px auto;
     /* animation: 动画名称 动画时间; */
     animation: ani 10s;
   }
 </style>
</head>

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

</html>

结果：

1.2 动画-多状态

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 定义动画:多状态*/
    @keyframes ani {
      0% {
        background-color: red;
      }

      10% {
        background-color: blue;
      }

      20% {
        background-color: yellow;
      }

      30% {
        background-color: green;
      }

      40% {
        background-color: orange;
      }

      50% {
        background-color: blue;
      }

      60% {
        background-color: yellow;
      }

      70% {
        background-color: green;
      }

    }

    /* 使用动画 （补帧动画：中间帧会系统自动补全）*/
    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      /* background-color: pink; */
      /* animation: 动画名称 动画时间; */
      margin: 100px auto;
      animation: ani 10s;
    }
  </style>
</head>

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

</html>

1.3 动画-属性

1.3.1 animation-name&animation-duration

css 复制代码 
      animation: ani 10s;
      /* 可以写成 */
      animation-name: ani;
      animation-duration: 10s;

1.3.2 animation-delay:延迟显示

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      height: 600px;
      border: 1px solid #000;
      display: flex;
      justify-content: space-evenly;
      align-items: end;
    }

    .son {

      left: 0;
      bottom: 0;
      width: 50px;
      height: 60px;
      border-radius: 25px;
      background-color: pink;
      animation-name: move;
      animation-duration: 5s;
    }


    @keyframes move {
      0% {
        transform: translateY(0px);
      }

      25% {
        transform: translateY(-400px);
      }

      50% {
        transform: translateY(0px);
      }

      75% {
        transform: translateY(-400px);
      }

      100% {
        transform: translateY(0px);
      }
    }

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

    .son:nth-child(2) {
      animation-delay: 0.5s;
    }

    .son:nth-child(3) {
      animation-delay: 1s;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</body>

</html>

1.3.3 animation-fill-mode：动画执行完毕状态（了解）

forwards：最后一帧状态
backwards：第一帧状态

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 3s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 动画状态控制 */
      animation-fill-mode: forwards;
    }

    @keyframes move {
      0% {
        transform: translateX(200px);
        background-color: green;
      }

      100% {
        transform: translateX(800px);
        background-color: blue;
      }

    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

1.3.4 animation-time-function:速度曲线

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box:nth-child(1) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* 默认：慢-快-慢 */
      /* linear:匀速 */
      animation-timing-function: linear;
    }

    .box:nth-child(2) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* animation-timing-function: ; */
    }

    .box:nth-child(3) {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 6s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线  */
      /* steps():不是自动补帧，是逐帧动画 */
      animation-timing-function: steps(8);
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: green;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

</html>

1.3.5 animation-iteration-count：重复次数

infinite为无限循环

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 默认速度曲线 */
      /* 默认：慢-快-慢 */
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      50% {
        transform: translateX(1000px);
        background-color: blue;
      }

      100% {
        transform: translateX(0px);
        background-color: yellow;
      }

    }
  </style>
</head>

<body>
  <div class="box"></div>

</body>

</html>

1.3.6 animation-direction：动画执行方向

设置为反向播放 :alternate
animation-direction: alternate;

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 播放方向 */
      /* 1.默认按照 设置关键帧顺序播放 */
      /* 2.设置为反向播放 :alternate*/
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

      /* 100% {
        transform: translateX(0px);
        background-color: yellow;
      } */

    }
  </style>
</head>

<body>
  <div class="box"></div>

</body>

</html>

1.3.7 animation-play-state:播放状态（暂停）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      animation: move 2s;
      /* 延迟1s后开始动画 */
      animation-delay: 1s;

      /* 播放方向 */
      /* 1.默认按照 设置关键帧顺序播放 */
      /* 2.设置为反向播放 :alternate*/
      /* 了解补充：反向reverse : anmation-direction:reverse; */
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    /* 配合鼠标进入的时候动画暂停 */
    .box:hover {
      animation-play-state: paused;
    }

    @keyframes move {
      0% {
        transform: translateX(0px);
        background-color: yellow;
      }

      100% {
        transform: translateX(1000px);
        background-color: blue;
      }

      /* 100% {
        transform: translateX(0px);
        background-color: yellow;
      } */

    }
  </style>
</head>

<body>
  <div class="box"></div>

</body>

</html>
相关推荐
里欧跑得慢29 分钟前
CSS 模块化架构的演进：BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒41 分钟前
Vue的computed属性把我坑惨了，原来我一直用错姿势
前端·人工智能·后端
小灰灰搞电子1 小时前
Rust+Slint 实现温度计源码分享
前端·rust·slint
计算机魔术师1 小时前
面壁智能 OpenBMB 推出 MathForm，面向 Lean 4 数学自动形式化的开源框架、数据集与模型
前端
NeilCarmack2 小时前
Deepseek-harness增加桌面版端序列：第 2 讲 · spawn Electron：当前进程如何“交棒“
前端·javascript·electron
上海魁鲸科技有限公司3 小时前
APS高级排产系统到底有什么用？一文讲清功能、选型与落地建议
前端·microsoft·excel
陈随易3 小时前
Bun v1.4 更新总结：把浏览器、图片、定时任务和工程工具都装进一个运行时
前端·后端·程序员
东风破_4 小时前
TypeScript 高级类型进阶：keyof、Exclude、Record 与类型组合思想
前端·后端·typescript
DS随心转插件4 小时前
Grok生成的html怎么导出——AI导出鸭：大模型结构化输出的“最后一公里”工程化解构
前端·人工智能·ai·html·豆包·deepseek·ai导出鸭
এ慕ོ冬℘゜5 小时前
使用 jQuery 动态渲染表格与状态切换
前端·javascript·jquery
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09VSCode+CodeX扩展，无法启动10如何新建文件夹？ 电脑新建文件夹的4种方法