CSS3心跳和小球跳动animation案例

javascript 复制代码
<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch, reactive } from 'vue'

onMounted(() => {
})
onUnmounted(() => {
});



</script>

<template>
  <div style="display: flex;">
    <div class="heart">
    </div>
    <div class="info">
      <div class="ball">
      </div>
      <div class="bottom"></div>
    </div>
  </div>


</template>

<style scoped lang="less">
.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vh;
  height: 100vh;
}

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 200px auto;
  transform: rotate(45deg) scale(.5);
  opacity: .5;
  // animation: hd 4s infinite;
  animation-name: hd;
  animation-duration: 2s;
  animation-iteration-count: infinite;

  &::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    transform: translateX(-50px);
  }

  &::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    transform: translateY(-50px);
  }
}

@keyframes hd {
  25% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }

  50% {
    transform: rotate(45deg) scale(.5);
    opacity: .5;
  }

  75% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }

  85% {
    transform: rotate(45deg) scale(.5);
    opacity: .5;
  }

  to {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}

.ball {
  width: 100px;
  height: 100px;
  // 渐变色
  background: radial-gradient(at center, #e67e22, #e74c3c); // 渐变色
  border-radius: 50%;
  border-radius: 50%;
  // margin: 300px 50px;
  animation: ball 1s infinite reverse;
}

.bottom {
  width: 300px;
  height: 40px;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 50%;
  z-index: -1;
  filter: blur(5px);
  animation: shadow 1s infinite reverse;
}

@keyframes ball {
  to {
    transform: translateY(-200px);
  }
}

@keyframes shadow {
  to {
    width: 300px;
    height: 20px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 50%;
    filter: blur(35px);
  }
}
</style>