前端css中keyframes(关键帧)的简单使用

news2024/12/24 8:40:24

前端css中keyframes的使用

一、前言
二、例子
- （一）、例子源码1
- （二）、源码1运行效果
- - 1.视频效果
  - 2.截图效果
三、结语
四、定位日期

一、前言

关键帧keyframes是css动画的一种，主要用于定义动画过程中某一阶段的样式变化，可以在动画中定义多个状态。关键帧常配合animation(动画)使用。主要使用步骤如下：

先创建一个动画效果，我们就命名为sun（太阳）
animation: sun 8s linear 1s infinite; /* 动画持续8秒，无限循环 */
然后对sun（使用关键帧）

@keyframes sun {
      90% {
        transform: translate(-100px, 500px) scale(4); /* 在动画的90%时，太阳下移并放大 */
        background-color: rgb(161, 80, 50); /* 太阳颜色 */
      }
      100% {
        transform: translate(-100px, 600px) scale(4); /* 在动画的100%时，太阳继续下移 */
        filter: drop-shadow(0px 0px 50px rgba(155, 57, 4, 0.5)); /* 添加阴影 */
      }
    }

由上方法，便可生成一个可以变化的太阳了。上方的代码我们只是对90%和100%阶段的关键帧进行属性调整，让太阳效果进行变换。若需求其他动画或想让效果更细致入微，也可以自行多加关键帧，如20%，30%，50%阶段各加一个关键帧，然后再对关键帧调整成自己想要的参数。
我们结合前面学过的filter、transform等知识，对关键帧进行使用。

二、例子

我们先创建一个盒子作为容器用于放置背景，叫他大盒子box_max，然后在大盒子里再创建一个小盒子。然后在小盒子里布置水和天空，以及太阳。使用animation、keyframes等功能以实现一个落日效果的动画。

（一）、例子源码1

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="en"> <!-- 设置页面语言为英文 -->
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
  <title>Keyframes Animation Example</title> <!-- 页面标题 -->

  <!-- 定义页面样式 -->
  <style>
    /* 最外层容器，背景为黑色 */
    .box_max {
      background-color: black; /* 设置容器背景颜色 */
      display: flex; /* 使用flex布局 */
      flex-direction: column; /* 子元素垂直排列 */
      justify-content: center; /* 垂直居中 */
      align-items: center; /* 水平居中 */
    }

    /* 内层容器，包含天空和水部分 */
    .box_min {
      width: 90vw; /* 宽度为视窗宽度的90% */
      height: 100vh; /* 高度为视窗高度的100% */
      overflow: hidden; /* 隐藏溢出内容 */
    }

    /* 天空部分，包含太阳 */
    .sky {
      width: 100%; /* 天空宽度占满 */
      height: 50vh; /* 天空高度为视窗高度的50% */
      background-color: aqua; /* 初始背景颜色 */
      position: relative; /* 设置定位方式 */
      animation: sky 8s linear 1s infinite; /* 动画持续8秒，1秒延迟，无限循环 */
    }

    /* 水部分，包含水中太阳 */
    .water {
      width: 100%; /* 水部分宽度占满 */
      height: 50vh; /* 水部分高度为视窗高度的50% */
      position: relative; /* 设置定位方式 */
      background-color: rgb(22, 62, 196); /* 初始背景颜色 */
      animation: water 8s linear 1s infinite; /* 动画持续8秒，线性，无限循环 */
    }

    /* 太阳的动画部分 */
    .sun {
      position: absolute; /* 绝对定位 */
      width: 50px; /* 设置太阳的宽度 */
      height: 50px; /* 设置太阳的高度 */
      background-color: rgb(215, 113, 113); /* 太阳颜色 */
      border-radius: 50%; /* 圆形 */
      top: 10px; /* 距离顶部10px */
      left: 300px; /* 距离左边300px */
      animation: sun 8s linear 1s infinite; /* 动画持续8秒，无限循环 */
      filter: blur(1px); /* 模糊效果 */
    }

    /* 水中太阳的动画部分 */
    .water-sun {
      position: absolute; /* 绝对定位 */
      width: 75px; /* 宽度 */
      height: 75px; /* 高度 */
      border-radius: 50%; /* 圆形 */
      bottom: 10px; /* 距离底部10px */
      left: 300px; /* 距离左边300px */
      animation: water-sun 8s linear 1s infinite; /* 动画持续8秒，无限循环 */
      background-color: rgb(141, 86, 86); /* 水中太阳的初始颜色 */
    }

    /* 定义天空的关键帧动画 */
    @keyframes sky {
      80% {
        background-color: rgb(67, 32, 19); /* 在动画的80%时，变为棕色 */
      }
      100% {
        background-color: black; /* 在动画的100%时，变为黑色 */
      }
    }

    /* 定义水的关键帧动画 */
    @keyframes water {
      90% {
        background-color: rgb(9, 9, 53); /* 在动画的90%时，变为深蓝色 */
      }
      100% {
        background-color: rgb(1, 1, 21); /* 在动画的100%时，变为更深的蓝色 */
      }
    }

    /* 太阳的关键帧动画 */
    @keyframes sun {
      90% {
        transform: translate(-100px, 500px) scale(4); /* 在动画的90%时，太阳下移并放大 */
        background-color: rgb(161, 80, 50); /* 太阳颜色 */
      }
      100% {
        transform: translate(-100px, 600px) scale(4); /* 在动画的100%时，太阳继续下移 */
        filter: drop-shadow(0px 0px 50px rgba(155, 57, 4, 0.5)); /* 添加阴影 */
      }
    }

    /* 水中太阳的关键帧动画 */
    @keyframes water-sun {
      70% {
        transform: translate(-100px, -200px) scale(3); /* 在动画的70%时，太阳上移并缩小 */
        background-color: orangered; /* 改变颜色 */
        height: 200px; /* 调整高度 */
        filter: blur(50px); /* 增加模糊 */
      }
      100% {
        transform: translate(-100px, -400px) scale(2); /* 在动画的100%时，太阳继续上移 */
        height: 100px; /* 调整高度 */
        filter: blur(100px); /* 增加模糊 */
      }
    }
  </style>
</head>

<body>
  <!-- 最外层容器 -->
  <div class="box_max">
    <!-- 内层容器 -->
    <div class="box_min">
      <!-- 天空部分，包含太阳 -->
      <div class="sky">
        天空
        <div class="sun"></div> <!-- 太阳 -->
      </div>

      <!-- 水部分，包含水中太阳 -->
      <div class="water">
        水
        <div class="water-sun"></div> <!-- 水中太阳 -->
      </div>
    </div>
  </div>
</body>
</html>

（二）、源码1运行效果

1.视频效果

css中落日的动画效果

2.截图效果

开始时动画效果截图如下：
中间时段效果截图如下：
结尾时段效果截图如下：

三、结语

本文用到了animation(动画)的效果。关于此部分的内容还未详细学习，后面会根据需要另起一篇博文。其中还用到了布局的相关内容，让太阳的落日效果更真实，让太阳可以落日消失而不是掉在水面上。关于布局的内容后面也会详细学习一下。
笔者今日状态不怎么好，但为了不断提升自己，多多少少也要学习一些新东西，便对着动画效果捣鼓着有所感发，也由此作文。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！