代码之家 › 专栏 › 技术社区 › ÄumiÄ Branislav

元素摇摆CSS

css-animations css3 css html

1

ÄumiÄ Branislav · 技术社区 · 6 年前

我用CSS制作了一个心脏,并让它调整大小,像平常一样,每秒变小变大。但我注意到这种奇怪的摇晃,我并没有真的把它放在那里,看着真的很痛苦。我知道可能有几个重复的问题,但它们没有真正的帮助。这里有一个 fiddle .

html,
body,
.container {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  transform: rotate(-45deg);
  transform-style: preserve-3d;
  animation: growMain 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart:after,
.heart:before {
  background-color: red;
  content: "";
  border-radius: 50%;
  position: absolute;
  transform: translateZ(-1px);
}

.heart:after {
  animation: growAfter 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart:before {
  animation: growBefore 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes growMain {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 80px;
    height: 80px;
  }
}

@keyframes growAfter {
  from {
    left: 25px;
    width: 50px;
    height: 50px;
  }
  to {
    left: 40px;
    width: 80px;
    height: 80px;
  }
}

@keyframes growBefore {
  from {
    top: -25px;
    width: 50px;
    height: 50px;
  }
  to {
    top: -40px;
    width: 80px;
    height: 80px;
  }
}

.inner {
  display: initial;
  transform: rotate(45deg);
}

.text {
  text-align: center;
  color: white;
  font-family: "Comic Sans MS";
  font-size: 100%;
  margin: 0;
}

<div class="container">
  <div class="heart">
    <div class="inner">
      <p class="text">Some text</p>
    </div>
  </div>
</div>

1 回复 | 直到 6 年前

1

2

cjl750 6 年前

设置实际宽度/高度/位置的动画效果往往不是很好,尤其是在像您现在这样同时执行多个动画时。移动/调整元素大小 transform 表现更好。

在这种情况下,我建议您设置心脏的初始大小,然后使用 scale 转换以产生脉冲效应。使用这种方法,您还可以从三个动画转换为一个动画,这对浏览器来说更容易处理,而且您不必担心将它们全部同步。

为了使文本不随心脏收缩,可以在其周围放置一个包装器,并将文本绝对放置在包装器的中心、心脏的顶部。然后改变心脏本身,而不是包装。(或者,如果希望文本与心脏一起收缩,请保持与现在相同的HTML结构。)

html,
body,
.container {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.heart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: rotate(-45deg) scale(1);
  transform-style: preserve-3d;
  animation: pulse 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart::before {
  left: 40px;
}
.heart::after {
  top: -40px;
}
.heart::after,
.heart::before {
  background-color: red;
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  transform: translateZ(-1px);
}

@keyframes pulse {
  from {
    transform: rotate(-45deg) scale(1);
  }
  to {
    transform: rotate(-45deg) scale(0.6);
  }
}

.text {
  position: absolute;
  top: 40%; /* slightly off-center to the top, so it appears centered when the heart shrinks */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-family: "Comic Sans MS";
  font-size: 100%;
  margin: 0;
}

<div class="container">
  <div class="heart-wrapper">
    <div class="heart"></div>
    <div class="text">some text</div>
  </div>
</div>