在CSS呼吸起搏器中改变吸气和呼气的长度

yi0zb3m4  于 2023-04-08  发布在  其他
关注(0)|答案(3)|浏览(111)

bounty还有3天到期。回答此问题可获得+200声望奖励。gal希望引起更多关注此问题。

我发现了一个关于使用CSS创建呼吸起搏器的教程：
代码中的吸气和呼气是相同的（4s）。我想用代码控制吸气，吸气后保持，呼气，呼气后保持的时间。
我该怎么做？
教程链接-https://css-tricks.com/recreating-apple-watch-breathe-app-animation/ codepen -https://codepen.io/geoffgraham/pen/zKMEPE

body {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.watch-face {
  height: 125px;
  width: 125px;
  animation: pulse 4s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}

.circle {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(0, 0);
  animation: center 6s infinite;
}

.circle:nth-child(odd) {
  background: #61bea2;
}

.circle:nth-child(even) {
  background: #529ca0;
}

.circle:nth-child(1) {
  animation: circle-1 4s ease alternate infinite;
}

.circle:nth-child(2) {
  animation: circle-2 4s ease alternate infinite;
}

.circle:nth-child(3) {
  animation: circle-3 4s ease alternate infinite;
}

.circle:nth-child(4) {
  animation: circle-4 4s ease alternate infinite;
}

.circle:nth-child(5) {
  animation: circle-5 4s ease alternate infinite;
}

.circle:nth-child(6) {
  animation: circle-6 4s ease alternate infinite;
}

@keyframes pulse {
  0% {
    transform: scale(.15) rotate(180deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circle-1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-35px, -50px);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35px, 50px);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-60px, 0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, 0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-35px, 50px);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35px, -50px);
  }
}
<div class="watch-face">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
css

3条答案

按热度按时间
vaj7vani

vaj7vani1#

这可以通过改变动画pulse来控制。例如，现在我减少了吸气，增加了呼气前的延迟：

body {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.watch-face {
  height: 125px;
  width: 125px;
  animation: pulse 4s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}

.circle {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(0, 0);
  animation: center 6s infinite;
}

.circle:nth-child(odd) {
  background: #61bea2;
}

.circle:nth-child(even) {
  background: #529ca0;
}

.circle:nth-child(1) {
  animation: circle-1 4s ease alternate infinite;
}

.circle:nth-child(2) {
  animation: circle-2 4s ease alternate infinite;
}

.circle:nth-child(3) {
  animation: circle-3 4s ease alternate infinite;
}

.circle:nth-child(4) {
  animation: circle-4 4s ease alternate infinite;
}

.circle:nth-child(5) {
  animation: circle-5 4s ease alternate infinite;
}

.circle:nth-child(6) {
  animation: circle-6 4s ease alternate infinite;
}

@keyframes pulse {
  0% {
    transform: scale(.15) rotate(180deg);
  }
  /* 👇 */
  60% {
    transform: scale(1);
  }
  /* ☝️ */
  100% {
    transform: scale(1);
  }
}

@keyframes circle-1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-35px, -50px);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35px, 50px);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-60px, 0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, 0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-35px, 50px);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35px, -50px);
  }
}
<div class="watch-face">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
赞(0）分享  回复(0）举报  2023-04-08
z5btuh9x

z5btuh9x2#

我想用代码控制吸气，吸气后保持，呼气，呼气后保持的时间。
吸气，呼气由animation持续时间决定，是4s，我引入了CSS variable来轻松更改：--duration。例如，将其更改为8s以使持续时间加倍。
保持定时
保持时间并不那么容易，因为没有CSS属性在ease alternate infiniteanimation之间“保持”。
获得输出的最简单方法是添加一个不应用任何更改的keyframe，例如：它会等待。
100%关键帧意味着它回到了开始，所以如果我们复制/粘贴keyframe并将中间帧更改为50%，动画将不会在50和100进程之间做任何事情，所以它'挂起'
请使用这些值，我已经将其设置为75%，因此它不会在75%和100%持续时间（--duration长）之间进行动画
同样的想法可以应用于0%帧，因此它在生长阶段之前“挂起”。

:root {
  --duration: 4s
}

body {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.watch-face {
  height: 125px;
  width: 125px;
  animation: pulse var(--duration) cubic-bezier(0.5, 0, 0.5, 1) alternate infinite;
}

.circle {
  height: 125px;
  width: 125px;
  border-radius: 50%;
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(0, 0);
  animation: center 6s infinite;
}

.circle:nth-child(odd) {
  background: #61bea2;
}

.circle:nth-child(even) {
  background: #529ca0;
}

.circle:nth-child(1) {
  animation: circle-1 var(--duration) ease alternate infinite;
}

.circle:nth-child(2) {
  animation: circle-2 var(--duration) ease alternate infinite;
}

.circle:nth-child(3) {
  animation: circle-3 var(--duration) ease alternate infinite;
}

.circle:nth-child(4) {
  animation: circle-4 var(--duration) ease alternate infinite;
}

.circle:nth-child(5) {
  animation: circle-5 var(--duration) ease alternate infinite;
}

.circle:nth-child(6) {
  animation: circle-6 var(--duration) ease alternate infinite;
}

@keyframes pulse {
  0% {
    transform: scale(.15) rotate(180deg);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circle-1 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-35px, -50px);
  }
  100% {
    transform: translate(-35px, -50px);
  }
}

@keyframes circle-2 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(35px, 50px);
  }
  100% {
    transform: translate(35px, 50px);
  }
}

@keyframes circle-3 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-60px, 0);
  }
  100% {
    transform: translate(-60px, 0);
  }
}

@keyframes circle-4 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(60px, 0);
  }
  100% {
    transform: translate(60px, 0);
  }
}

@keyframes circle-5 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-35px, 50px);
  }
  100% {
    transform: translate(-35px, 50px);
  }
}

@keyframes circle-6 {
  0% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(35px, -50px);
  }
  100% {
    transform: translate(35px, -50px);
  }
}
<div class="watch-face">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
赞(0）分享  回复(0）举报  2023-04-08
unhi4e5o

unhi4e5o3#

此代码将帮助您：
Html部分：

<div class="breath-pacer"></div>

CSS部分：

.breath-pacer {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 2px solid black;
      animation-name: breath;
      animation-duration: 4s; /* Total duration of one breath cycle */
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
    
    @keyframes breath {
      0% {
        transform: scale(1); /* Starting position */
      }
      25% {
        transform: scale(1.1); /* Inhale */
      }
      35% {
        transform: scale(1.1); /* Post-inhale hold */
      }
      50% {
        transform: scale(0.9); /* Exhale */
      }
      60% {
        transform: scale(0.9); /* Post-exhale hold */
      }
      100% {
        transform: scale(1); /* Back to starting position */
      }
    }
赞(0）分享  回复(0）举报  2023-04-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com