css 浮动动画怎么写呢？

你好啊你好

41922790

发布于
2023-04-24 四川

类似这样，飘忽不定的感觉

css3动画

阅读 1.4k

2 个回答

得票最新

XiongMiao

6411515

发布于
2023-04-24 云南

<!DOCTYPE html>
<html>

<head>
  <style>
    .wrap {
      width: 500px;
      height: 1000px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ellipse {
      width: 100px;
      height: 200px;
      border-radius: 100%;
      background-color: blue;
      animation-name: identifier;
      animation-duration: 3s;
      animation-timing-function: linear;
      animation-direction: alternate;
      animation-iteration-count: infinite;

    }
    @keyframes identifier {
      0% { }
      100% {transform: translate(-20px, -30px) rotate(-10deg)}
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="ellipse"></div>
  </div>
</body>

</html>

玛拉_以琳

8.7k41542

发布于
2023-04-24 上海

基本的写好了, 在控制台用图中的工具根据自己的需要调节一下

<div class="run-animation">

  <style>
    .run-animation {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 100px;
      left: 100px;
      background-color: aquamarine;
      animation: x-run 1.5s 0.1s linear infinite, y-run 1.5s 0.1s linear infinite;
      /*
  *animation: x-run 0.5s 0.1s linear, y-run 0.5s 0.1s cubic-bezier(.09,.66,.26,1.29);
  */
    }

    @keyframes x-run {
      0% {
        left: 100px;
      }

      50% {
        left: 80px;
      }

      100% {
        left: 100px;
      }
    }

    @keyframes y-run {
      0% {
        top: 100px;
      }

      50% {
        top: 50px;
      }

      100% {
        top: 100px;
      }
    }
  </style>

或者使用 CSS Motion Path:

https://codepen.io/Chokcoco/pen/gOgqoem
根据自己的需要改一下path

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进