svg创意退出注销按钮动画效果-html代码-BFW代码库

svg创意退出注销按钮动画效果

代码语言：html

代码描述：svg创意退出注销按钮动画效果

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
.logoutButton {
  --figure-duration: 100ms;
  --transform-figure: none;
  --walking-duration: 100ms;
  --transform-arm1: none;
  --transform-wrist1: none;
  --transform-arm2: none;
  --transform-wrist2: none;
  --transform-leg1: none;
  --transform-calf1: none;
  --transform-leg2: none;
  --transform-calf2: none;
  background: none;
  border: 0;
  color: #f4f7ff;
  cursor: pointer;
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  outline: none;
  padding: 0 0 0 20px;
  perspective: 100px;
  position: relative;
  text-align: left;
  width: 130px;
}
.logoutButton::before {
  background-color: #1f2335;
  border-radius: 5px;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: none;
  transition: transform 50ms ease;
  width: 100%;
  z-index: 2;
}
.logoutButton:hover .door {
  transform: rotateY(20deg);
}
.logoutButton:active::before {
  transform: scale(0.96);
}
.logoutButton:active .door {
  transform: rotateY(28deg);
}
.logoutButton.clicked::before {
  transform: none;
}
.logoutButton.clicked .door {
  transform: rotateY(35deg);
}
.logoutButton.door-slammed .door {
  transform: none;
  transition: transform 100ms ease-in 250ms;
}
.logoutButton.falling {
  animation: shake 200ms linear;
}
.logoutButton.falling .bang {
  animation: flash 300ms linear;
}
.logoutButton.falling .figure {
  animation: spin 1000ms infinite linear;
  bottom: -1080px;
  opacity: 0;
  right: 1px;
  transition: transform calc(var(--figure-duration) * 1ms) linear, bottom calc(var(--figure-duration) * 1ms) cubic-bezier(0.7, 0.1, 1, 1) 100ms, opacity calc(var(--figure-duration) * 0.25ms) linear calc(var(--figure-duration) * 0.75ms);
  z-index: 1;
}
.logoutButton--light::before {
  background-color: #f4f7ff;
}
.logoutButton--light .button-text {
  color: #1f2335;
}
.logoutButton--light .door,
.logoutButton--light .doorway {
  fill: #1f2335;
}

.button-text {
  color: #f4f7ff;
  font-weight: 500;
  position: relative;
  z-index: 10;
}

svg {
  display: block;
  position: absolute;
}

.figure {
  bottom: 5px;
  fill: #4371f7;
  right: 18px;
  transform: var(--transform-figure);
  transition: transform calc(var(--figure-duration) * 1ms) cubic-bezier(0.2, 0.1, 0.8, 0.9);
  width: 30px;
  z-index: 4;
}

.door,
.doorway {
  bottom: 4px;
  fill: #f4f7ff;
  right: 12px;
  width: 32px;
}

.door {
  transform: rotateY(20deg);
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  z-index: 5;
}
.door path {
  fill: #4371f7;
  s.........完整代码请登录后点击上方下载按钮下载查看