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

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

代码语言：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);.........完整代码请登录后点击上方下载按钮下载查看