CSS3心跳和小球跳动animation案例

 
<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>