主页 / 问题 / 1318554
Accepted
kiskiskit
Asked:2022-08-17 22:57:49 +0000 UTC2022-08-17 22:57:49 +0000 UTC

如何使用关键帧实现这样的动画？

  • 772

请告诉我如何在网站上实现动画。我希望它看起来像这样作为背景： 在此处输入图像描述

动画逻辑很简单：你需要半圆从小到大出现，以此类推。请告诉我如何使用关键帧来实现这一点。

.container {
  margin: 0 auto;
  background: #FF6666;
  width: 600px;
  height: 600px;
}

header:before {
  content: "";
  position: absolute;
  width: 5em;
  height: 10em;
  border: 2px solid red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  background: mistyrose;
}
<header>
  <div class="container">
    <p>test</p>
  </div>
</header>

html

1 个回答

  1. Best Answer

    是的，这里没有什么要实现的——你为背景转换设置动画，就是这样：

    @keyframes foo {
  to { background-position-x: calc(-5vmax - 1.5px); }
}
/* значение сдвига подбирается по фоновому изображению, по ширине 
   повторяемого фрагмента. Здесь в градиенте, эта ширина формируется
   суммой интервала между линиями (5vmax) и толщины линии (1.5px) */


* { box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
html, body { margin: 0; padding: 0; height: 100%; }

header {
  position: relative;
  margin: 0 auto; padding: 0.5rem;
  min-width: 450px;
  height: 100%; max-height: 50vw;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -11vmax; right: -11vmax; bottom: -11vmax; left: -11vmax;
  background: 0 center / 150% 250% no-repeat;
  background-image: repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax);
  transform-origin: right;
  transform: rotate(4deg);
  animation: foo 0.5s linear infinite forwards;
  will-change: background-position; /* хэллоу гугл, где мои оптимизашки? :) */
  opacity: 0.2;
  z-index: -1;
}

.click-test { position: absolute; right: 0; bottom: 3vh; left: 0; text-align: center; }
.click-test > button { padding: 0.5rem 1rem; font-weight: 300; }
    <header>
  <div class="container">
    <p>test</p>
    <p class="click-test">
      <button>Просто кнопка без действий</button>
    </p>
  </div>
</header>

    当然，这只适用于重复的模式（实际上，动画的工作原理是这样的：平滑地向一侧移动“1 步”，然后立即返回……这个循环重复，只产生无尽运动的错觉）。

    版本通过transform- 不占用 CPU 时间，但线条质量较差（这是渲染计算图形中的一个错误，它不会出现在位图上。这里的视觉恐怖部分通过将渐变加倍来抵消）：

    @keyframes foo {
  to { transform: rotate(4deg) translateX(calc(-5vmax - 1.5px)); }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

header {
  position: relative;
  margin: 0 auto; padding: 0.5rem;
  min-width: 450px;
  height: 100%; max-height: 50vw;
  overflow: hidden;
}

header::before {
  content: "";
  position: absolute;
  top: -11vmax; right: -11vmax; bottom: -11vmax; left: -11vmax;
  background: 0 center / 150% 250% no-repeat;
  background-image: repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax),
                    repeating-radial-gradient(100% 10% at 550% 50%, transparent -1.5px, #000 0, transparent 0, transparent 5vmax);
  transform-origin: right;
  transform: rotate(4deg);
  animation: foo 0.5s linear infinite forwards;
  will-change: transform;
  opacity: 0.2;
}
    <header>
  <div class="container">
    <p>test</p>
  </div>
</header>

    // 题外话：顺便说一下，在Firefox中“撕裂”的线条不仅在第二个例子中，而且在第一个例子中，总是（而在chrome中，它们仅在没有背景位置动画的情况下被可怕地绘制，并且它们被渲染已经平滑）。唉，浏览器的渐变仍然很痛苦......而且will-change现在背景的位置在这两个浏览器中都没有预期的（根据规范）效果......虽然狐狸对CPU的负载明显减少当第一个示例扩展到全屏时，即使没有帮助will-change。

    • 5

相关问题