svg实现火苗燃烧铃铛摇摆提醒动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg实现火苗燃烧铃铛摇摆提醒动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
html {
  font-size: 12px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #f5fccd;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 2rem;
  overflow: hidden;
}

.bell {
  position: relative;
}
.bell__icon-background {
  position: absolute;
  z-index: -1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: linear-gradient(#fff 50%, #ff7d66 200%);
  background-size: 100% 200%;
  background-position: 0 0;
  border-radius: 30%;
  box-shadow: 0 0.5rem 0 0 rgba(0, 0, 56, 0.1);
}
.bell__icon-shadow {
  position: absolute;
  opacity: 0.2;
  transform-origin: top;
  animation: ring;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: -0.04s;
}
.bell__icon {
  transform-origin: top;
  animation: ring;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes ring {
  0%, 50% {
    transform: rotate(0);
  }
  10%, 30% {
    transform: rotate(-30deg);
  }
  20%, 40% {
    transform: rotate(30deg);
  }
}
.bell__icon-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(8deg);
  transform-origin: top;
  animation: ring-tip;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes ring-tip {
  0%, 50% {
    transform: rotate(8deg);
  }
  10%, 30% {
    transform: rotate(-10deg);
  }
  20%, 40% {
    transform: rotate(30deg);
  }
}
.bell:after {
  content: "3";
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #ff7d66;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes number {
  0%, 50% {
    transform: rotate(0deg);
  }
  10%, 30% {
    transform: rotate(-10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
}

.fire {
  position: absolute;
  top: -14.5rem;
  right: -8.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20rem;
  height: 20rem;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.fire__part {
  position: absolute;
}
@keyframes flames {
  0%, 100% {
    transform: scale3d(0.8, 1.1, 1) rotate(1deg);
  }
  20% {
    transform: scale3d(0.9, 1, 1) rotate(4deg);
  }
  40% {
    transform: scale3d(0.8, 1.2, 1) rotate(2deg);
  }
  60% {
    transform: scale3d(0.9, 1, 1) rotate(-4deg);
  }
  80% {
    transform: scale3d(0.8, 1.2, 1) rotate(-2deg);
  }
}
.fire__part--red {
  bottom: 2rem;
  width: 8rem;
  height: 8rem;
  background: #ff7d66;
  border-radius: 50%;
  transform-origin: bottom;
  animation: flames;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -0.6s;
}
.fire__part--orange {
  bottom: 2.5rem;
  width: 6rem;
  height: 6rem;
  background: orange;
  border-radius: 50%;
  transform-origin: bottom;
  animation: flames;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -0.4s;
}
.fire__part--yellow {
  bottom: 3rem;
  width: 4rem;
  height: 4rem;
  background: #f5fccd;
  border-radius: 50%;
  transform-origin: bottom;
  animation: flames;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -0.2s;
}
</style>

  
  
</head>

<body translate="no">
  <div class="bell">
  <div class="bell__icon-background"></div>
  <div class="fire">
    <div class="fire__part fire__part--red"></div>
    <div class="fire__part fire__part--orange"></div>
    <div class="fire__part fire__part--yellow"></div>
  </div><svg class="bell__icon-shadow" xmlns="http://www.w3.org/2000/svg" width="12.5rem" height="12.5rem" viewBox="0 0 24 24" fill="none">
    <path d="M11.9769 1.71436C12.7483 1.71436 13.3712 2.33721 13.3712 3.10864V4.50293H10.5769V3.10864C10.5826 2.33721 11.2055 1.71436 11.9769 1.71436Z" fill="#ff7d66" />
    <path d="M11.9771 1.71436C11.8571 1.71436 11.7486 1.7315 11.6343 1.75436C12.24 1.90864 12.6914 2.45721 12.6914 3.10864V4.50293H13.3714V3.10864C13.3771 2.33721 12.7486 1.71436 11.9771 1.71436Z" fill="#ff7d66" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="#ff7d66" />
    <path d="M4.9028 15.1714C4.83994 15.2457 4.77137 15.3257 4.7028 15.4114C3.58851 16.7143 2.9428 17.4285 2.97137 18.36H20.9828C21.0114 17.4285 20.3714 16.7085 19.2571 15.4057C19.1828 15.32 19.1199 15.2457 19.0571 15.1657C17.1885 14.5143 14.7028 14.1143 11.9771 14.1143C9.25137 14.1143 6.77137 14.5143 4.9028 15.1714Z" fill="url(#paint3_radial)" />
    <path d="M11.9771 21.2514C16.9509 21.2514 20.9829 20.6783 20.9829 19.9714C20.9829 19.2645 16.9509 18.6914 11.9771 18.6914C7.00343 18.6914 2.97144 19.2645 2.97144 19.9714C2.97144 20.6783 7.00343 21.2514 11.9771 21.2514Z" fill="#ff7d66" />
    <path d="M11.9771 17.0801C7.00572 17.0801 2.97144 17.6572 2.97144 18.3601V19.9715C2.97144 19.2629 7.00572 18.6915 11.9771 18.6915C16.9543 18.6915 20.9829 19.2629 20.9829 19.9715V18.3601C20.9886 17.6572 16.9543 17.0801 11.9771 17.0801Z" fill="#ff7d66" />
    <path d="M20.9886 18.3599C21.0172 17.4284 20.3772 16.7084 19.2629 15.4056C18.1486 14.1027 18.0343 14.0227 17.6915 9.5713C17.3886 5.66273 15.6629 4.38845 13.5886 3.74845C13.0686 3.58845 12.5258 3.51416 11.9829 3.51416C15.3886 4.16559 15.2172 7.62273 15.2172 10.4684C15.2172 13.3142 15.8229 14.1827 17.5486 15.1313C18.6401 15.7313 18.8343 17.2913 18.8286 18.3599H20.9886Z" fill="#ff7d66" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="#ff7d66" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="#ff7d66" />
    <path d="M11.9771 17.0801C7.00572 17.0801 2.97144 17.6572 2.97144 18.3601V19.9715C2.97144 19.2629 7.00572 18.6915 11.9771 18.6915C16.9543 18.6915 20.9829 19.2629 20.9829 19.9715V18.3601C20.9886 17.6572 16.9543 17.0801 11.9771 17.0801Z" fill="#ff7d66" />
  </svg><svg class="bell__icon" xmlns="http://www.w3.org/2000/svg" width="12.5rem" height="12.5rem" viewBox="0 0 24 24" fill="none">
    <path d="M11.9769 1.71436C12.7483 1.71436 13.3712 2.33721 13.3712 3.10864V4.50293H10.5769V3.10864C10.5826 2.33721 11.2055 1.71436 11.9769 1.71436Z" fill="url(#paint0_linear)" />
    <path d="M11.9771 1.71436C11.8571 1.71436 11.7486 1.7315 11.6343 1.75436C12.24 1.90864 12.6914 2.45721 12.6914 3.10864V4.50293H13.3714V3.10864C13.3771 2.33721 12.7486 1.71436 11.9771 1.71436Z" fill="url(#paint1_radial)" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="url(#paint2_radial)" />
    <path d="M4.9028 15.1714C4.83994 15.2457 4.77137 15.3257 4.7028 15.4114C3.58851 16.7143 2.9428 17.4285 2.97137 18.36H20.9828C21.0114 17.4285 20.3714 16.7085 19.2571 15.4057C19.1828 15.32 19.1199 15.2457 19.0571 15.1657C17.1885 14.5143 14.7028 14.1143 11.9771 14.1143C9.25137 14.1143 6.77137 14.5143 4.9028 15.1714Z" fill="url(#paint3_radial)" />
    <path d="M11.9771 21.2514C16.9509 21.2514 20.9829 20.6783 20.9829 19.9714C20.9829 19.2645 16.9509 18.6914 11.9771 18.6914C7.00343 18.6914 2.97144 19.2645 2.97144 19.9714C2.97144 20.6783 7.00343 21.2514 11.9771 21.2514Z" fill="url(#paint4_linear)" />
    <path d="M11.9771 17.0801C7.00572 17.0801 2.97144 17.6572 2.97144 18.3601V19.9715C2.97144 19.2629 7.00572 18.6915 11.9771 18.6915C16.9543 18.6915 20.9829 19.2629 20.9829 19.9715V18.3601C20.9886 17.6572 16.9543 17.0801 11.9771 17.0801Z" fill="url(#paint5_linear)" />
    <path d="M20.9886 18.3599C21.0172 17.4284 20.3772 16.7084 19.2629 15.4056C18.1486 14.1027 18.0343 14.0227 17.6915 9.5713C17.3886 5.66273 15.6629 4.38845 13.5886 3.74845C13.0686 3.58845 12.5258 3.51416 11.9829 3.51416C15.3886 4.16559 15.2172 7.62273 15.2172 10.4684C15.2172 13.3142 15.8229 14.1827 17.5486 15.1313C18.6401 15.7313 18.8343 17.2913 18.8286 18.3599H20.9886Z" fill="url(#paint6_linear)" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="url(#paint9_radial)" />
    <path d="M20.9885 18.3599C21.0171 17.4284 20.3771 16.7084 19.2628 15.4056C18.1485 14.1027 18.0342 14.0227 17.6914 9.5713C17.3885 5.66273 15.6628 4.38845 13.5885 3.74845C13.0685 3.58845 12.5256 3.51416 11.9828 3.51416C11.4399 3.51416 10.8971 3.58845 10.3771 3.74845C8.29708 4.39416 6.57708 5.66845 6.27422 9.57702C5.93136 14.0284 5.81136 14.1027 4.70279 15.4113C3.59422 16.7199 2.94279 17.4284 2.97136 18.3599H20.9885Z" fill="url(#paint10_radial)" />
    <path d="M11.9771 17.0801C7.00572 17.0801 2.97144 17.6572 2.97144 18.3601V19.9715C2.97144 19.2629 7.00572 18.6915 11.9771 18.6915C16.9543 18.6915 20.9829 19.2629 20.9829 19.9715V18.3601C20.9886 17.6572 16.9543 17.0801 11.9771 17.0801Z" fill="url(#paint11_linear)" />
    <defs>
      <linearGradient id="paint0_linear" x1="14.1022" y1="6.16057" x2="9.49831" y2="0.52084" gradientUnits="userSpaceOnUse">
        <stop stop-color="#A3541E" />
        <stop offset="0.5525" stop-color="#FCCE38" />
        <stop offset="0.9996" stop-color="#FF9D00" />
      </linearGradient>
      <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.5481 3.38102) scale(2.15238)">
        <stop offset="0.4543" stop-color="#C86F34" stop-opacity="0" />
        <stop offset="0.6679" stop-color="#C66D33" stop-opacity="0.4456" />
        <stop offset="0.7838" stop-color="#BE672E" stop-opacity="0.6874" />
        <stop offset="0.876" stop-color="#B05E26" stop-opacity="0.8797&q.........完整代码请登录后点击上方下载按钮下载查看