svg+jquery实现一个跳出动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+jquery实现一个跳出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
        <meta charset="UTF-8">
<style>
    html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #E8F4FA, #E1F1F9);
}

.reload-button {
  width: 100px;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateZ(0);
  text-align: center;
  background: #FFFFFF;
  padding: 8px 16px;
  cursor: pointer;
  border: 3px solid #B5D3E8;
  border-radius: 5px;
  color: #B5D3E8;
  transition: transform 0.1s;
  user-select: none;
}
.reload-button:hover {
  transform: translate(-50%, -1px);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}

.stack-illustration {
  display: block;
  position: relative;
  top: 50%;
  height: 50%;
  min-height: 230px;
  margin: 0 auto;
  transform: translateY(-50%) translateZ(0);
}

svg:not(:root).stack-illustration {
  overflow: visible;
}

.stack-illustration__item {
  position: relative;
}
.stack-illustration__item--one {
  transform: rotate(-20deg) translate(-3px, 80px) translateZ(0);
}
.stack-illustration__item--one.animated {
  animation: popupLeft 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1;
}
.stack-illustration__item--one.animated.secondary {
  animation: hoverLeft 3s linear forwards infinite;
}
.stack-illustration__item--two {
  transform: translate(52px, 54px) translateZ(0);
}
.stack-illustration__item--two.animated {
  animation: popupCenter 0.75s 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1;
}
.stack-illustration__item--two.animated.secondary {
  animation: hoverCenter 3s linear forwards infinite;
}
.stack-illustration__item--three {
  transform: rotate(20deg) translate(100px, 34px) translateZ(0);
}
.stack-illustration__item--three.animated {
  animation: popupRight 0.75s 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 1;
}
.stack-illustration__item--three.animated.secondary {
  animation: hoverRight 3s linear forwards infinite;
}

@keyframes popupLeft {
  0% {
    transform: rotate(-20deg) translate(-3px, 80px) translateZ(0);
  }
  60% {
    transform: rotate(-20deg) translate(-3px, 17px) translateZ(0);
  }
  80% {
    transform: rotate(-20deg) translate(-3px, 20px) translateZ(0);
  }
  100% {
    transform: rotate(-20deg) translate(-3px, 19px) translateZ(0);
  }
}
@keyframes popupCenter {
  0% {
    transform: translate(52px, 54px) translateZ(0);
  }
  60% {
    transform: translate(52px, -2px) translateZ(0);
  }
  80% {
    transform: translate(52px, 1px) translateZ(0);
  }
  100% {
    transform: translate(52px, 0px) translateZ(0);
  }
}
@keyframes popupRight {
  0% {
    transform: rotate(20deg) translate(100px, 34px) translateZ(0);
  }
  60% {
    transform: rotate(20deg) translate(100px, -30px) translateZ(0);
  }
  80% {
    transform: rotate(20deg) translate(100px, -27px) translateZ(0);
  }
  100% {
    transform: rotate(20deg) translate(100px, -28px) translateZ(0);
  }
}
@keyframes hoverLeft {
  0% {
    transform: rotate(-20deg) translate(-3px, 19px) translateZ(0);
  }
  50% {
    transform: rotate(-20deg) translate(-3px, 21px) translateZ(0);
  }
  100% {
    transform: rotate(-20deg) translate(-3px, 19px) translateZ(0);
  }
}
@keyframes hoverCenter {
  0% {
    transform: translate(52px, 0px) translateZ(0);
  }
  40% {
    transform: translate(52px, 2px) translateZ(0);
  }
  100% {
    transform: translate(52px, 0px) translateZ(0);
  }
}
@keyframes hoverRight {
  0% {
    transform: rotate(20deg) translate(100px, -28px) translateZ(0);
  }
  60% {
    transform: rotate(20deg) translate(100px, -26px) translateZ(0);
  }
  100% {
    transform: rotate(20deg) translate(100px, -28px) translateZ(0);
  }
}
</style>
</head>

<body>
        <svg viewBox="0 0 136 135" class="stack-illustration">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-855.000000, -240.000000)">
                            <g transform="translate(855.000000, 240.000000)">
                                <ellipse fill="#D4E6F3" cx="68" cy="133" rx="44" ry="2"></ellipse>
                                <g class="stack-illustration__item animated stack-illustration__item--one" transform="translate(19.139324, 27.378808) rotate(-20.000000) translate(-19.139324, -27.378808) translate(3.139324, 15.378808)">
                                    <rect fill="#F2F9FE" x="4.21884749e-14" y="-3.92574862e-13" width="32" height="24" rx="2"></rect>
                                    <path d="M2,2 L2,22 L30,22 L30,2 L2,2 Z M2,0 L30,0 C31.1045695,-2.02906125e-16 32,0.8954305 32,2 L32,22 C32,23.1045695 31.1045695,24 30,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" fill="#B5D3E8" fill-rule="nonzero"></path>
                                    <path d="M16.4329136,17.402551 L25.896893,8.18614168 C26.2925582,7.80082682 26.3009487,7.16771744 25.9156339,6.77205229 C25.530319,6.37638715 24.8972096,6.3.........完整代码请登录后点击上方下载按钮下载查看