火箭发射按钮

下载代码

html

css

分享到微信朋友圈

html

<a href="#" class="rocket-button">
    <div class="default">Launch Site</div>
    <div class="success">
        <svg>
            <use xlink:href="#check">
        </svg>
        <div>Site live</div>
    </div>
    <div class="animation">
        <div class="rocket">
            <svg>
                <use xlink:href="#rocket">
            </svg>
        </div>
        <div class="smoke">
            <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
    </div>
</a>

css

.rocket-button {
  --background: #262730;
  --text: #fff;
  --check: #5c86ff;
  --blue: #5c86ff;
  --blue-transparent: rgba(92, 134, 255, 0);
  --dot: #fe5151;
  --dot-shadow: rgba(254, 81, 81, 0.3);
  --smoke: rgba(247, 248, 255, 0.9);
  --rocket: #eef0fd;
  --rocket-shadow-left: #fff;
  --rocket-shadow-right: #d3d4ec;
  --rocket-wing-right: #c2c3d9;
  --rocket-wing-left: #d3d4ec;
  --rocket-window: #275efe;
  --rocket-window-shadow: #c2c3d9;
  --rocket-line: #9ea0be;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  padding: 14px 28px;
  display: table;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-decoration: none;
  color: var(--text);
}
.rocket-button:before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: transform 0.2s ease;
  transform: scale(var(--s, 1)) translateZ(0);
  position: absolute;
  background: var(--background);
}
.rocket-button .default,
.rocket-button .success,
.rocket-button .animation {
  z-index: 1;
}
.rocket-button .default span,
.rocket-button .success span {
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform: translateX(var(--x, 0));
  opacity: var(--o, 1);
  filter: blur(var(--b, 0px));
}
.rocket-button .default {
  position: relative;
  display: flex;
}
.rocket-button .default:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin: 7px 8px 0 0;
  box-shadow: 0 0 0 1px var(--dot-shadow);
  -webkit-animation: pulse 1s ease infinite;
          animation: pulse 1s ease infinite;
  vertical-align: top;
  display: inline-block;
  transition: opacity 0.3s linear;
  opacity: var(--o, 1);
  background: var(--dot);
}
.rocket-button .success {
  opacity: var(--o, 0);
  position: absolute;
  display: flex;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.rocket-button .success svg {
  width: 13px;
  height: 11px;
  stroke-width: 2;
  stroke-dasharray: 20px;
  stroke-dashoffset: var(--o, 20px);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
  color: var(--check);
  margin: 4px 8px 0 0;
}
.rocket-button .success > div {
  display: flex;
}
.rocket-button .success > div span {
  --o: 0;
  --x: 8px;
  --b: 2px;
}
.rocket-button .animation {
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  overflow: hidden;
  position: absolute;
}
.rocket-button .animation .smoke {
  left: 50%;
  top: 100%;
  position: absolute;
}
.rocket-button .animation .smoke i {
  opacity: 0;
  transform: scale(0.7);
  border-radius: 50%;
  position: absolute;
  bottom: var(--b, -20px);
  left: var(--l, -12px);
  width: var(--s, 32px);
  height: var(--s, 32px);
  background: var(--smoke);
}
.rocket-button .animation .smoke i:nth-child(2) {
  --s: 20px;
  --l: -24px;
  --b: -10px;
  --d: 50ms;
}
.rocket-button .animation .smoke i:nth-child(3) {
  --s: 22px;
  --l: 0;
  --b: -12px;
  --d: 20ms;
}
.rocket-button .animation .smoke i:nth-child(4) {
  --s: 12px;
  --l: 16px;
  --b: -6px;
  --d: 120ms;
}
.rocket-button .animation .smoke i:nth-child(5) {
  --s: 24px;
  --l: -20px;
  --b: -14px;
  --d: 80ms;
}
.rocket-button .animation .smoke i:nth-child(6) {
  --s: 12px;
  --l: -28px;
  --b: -8px;
  --d: 60ms;
}
.rocket-button .animation .rocket {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 1;
  margin: 0 0 0 -12px;
}
.rocket-button .animation .rocket:before {
  content: "";
  margin-left: -3px;
  left: 50%;
  top: 32px;
  position: absolute;
  width: 6px;
  border-radius: 2px;
  height: 32px;
  transform-origin: 50% 0;
  transform: scaleY(0.5);
  background: linear-gradient(var(--blue), var(--blue-transparent));
}
.rocket-button .animation .rocket svg {
  width: 24px;
  height: 36px;
  display: block;
}
.rocket-button:active {
  --s: .95;
}
.rocket-button.live:before {
  -webkit-animation: shake 1.5s ease 0.6s;
          animation: shake 1.5s ease 0.6s;
}
.rocket-button.live .default:before {
  --o: 0;
}
.rocket-button.live .default span {
  --o: 0;
  --x: 8px;
  --b: 2px;
  transition: transform 0.3s ease var(--d), opacity 0.3s ease var(--d), filter 0.3s ease var(--d);
}
.rocket-button.live .success {
  --o: 1;
}
.rocket-button.live .success span {
  --o: 1;
  --x: 0;
  --b: 0;
  transition: transform 0.3s ease calc(var(--d) + 2200ms), opacity 0.3s ease calc(var(--d) + 2200ms), filter 0.3s ease calc(var(--d) + 2200ms);
}
.rocket-button.live .success svg {
  --o: 0;
  transition: stroke-dashoffset 0.3s ease 2.25s;
}
.rocket-button.live .animation .rocket {
  -webkit-animation: rocket 2s ease forwards 0.4s;
          animation: rocket 2s ease forwards 0.4s;
}
.rocket-button.live .animation .rocket:before {
  -webkit-animation: rocket-light 2s ease forwards 0.4s;
          animation: rocket-light 2s ease forwards 0.4s;
}
.rocket-button.live .animation .smoke i {
  -webkit-animation: var(--n, smoke) 1.7s ease forwards calc(var(--d) + 600ms);
          animation: var(--n, smoke) 1.7s ease forwards calc(var(--d) + 600ms);
}
.rocket-button.live .animation .smoke i:nth-child(3), .rocket-button.live .animation .smoke i:nth-child(6) {
  --n: smoke-alt;
}

@-webkit-keyframes pulse {
  50% {
    box-shadow: 0 0 0 2px var(--dot-shadow);
  }
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 2px var(--dot-shadow);
  }
}
@-webkit-keyframes shake {
  8%, 24%, 40%, 56%, 72%, 88% {
    transform: translateX(-1px);
  }
  16%, 32%, 48%, 64%, 80%, 96% {
    transform: translateX(1px);
  }
}
@keyframes shake {
  8%, 24%, 40%, 56%, 72%, 88% {
    transform: translateX(-1px);
  }
  16%, 32%, 48%, 64%, 80%, 96% {
    transform: translateX(1px);
  }
}
@-webkit-keyframes smoke {
  20%, 80% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    transform: scale(0.92);
  }
}
@keyframes smoke {
  20%, 80% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    transform: scale(0.92);
  }
}
@-webkit-keyframes smoke-alt {
  20%, 80% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    transform: scale(1.08);
  }
}
@keyframes smoke-alt {
  20%, 80% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    transform: scale(1.08);
  }
}
@-webkit-keyframes rocket {
  35% {
    transform: translateY(-56px);
  }
  80% {
    transform: translateY(-48px);
    opacity: 1;
  }
  100% {
    transform: translateY(-108px) scale(0.6);
    opacity: 0;
  }
}
@keyframes rocket {
  35% {
    transform: translateY(-56px);
  }
  80% {
    transform: translateY(-48px);
    opacity: 1;
  }
  100% {
    transform: translateY(-108px) scale(0.6);
    opacity: 0;
  }
}
@-webkit-keyframes rocket-light {
  35% {
    transform: scaleY(0.6);
  }
  75% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes rocket-light {
  35% {
    transform: scaleY(0.6);
  }
  75% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Roboto", Arial;
  justify-content: center;
  align-items: center;
  background: #5c86ff;
}

JavaScript

const d = 40;

document.querySelectorAll('.rocket-button').forEach(elem => {

elem.querySelectorAll('.default, .success > div').forEach(text => {
        charming(text);
        text.querySelectorAll('span').forEach((span, i) => {
            span.innerHTML = span.textContent == ' ' ? ' ' : span.textContent;
            span.style.setProperty('--d', i * d + 'ms');
            span.style.setProperty('--ds', text.querySelectorAll('span').length * d - d - i * d + 'ms');
        });
    });

elem.addEventListener('click', e => {
        e.preventDefault();
        if(elem.classList.contains('animated')) {
            return;
        }
        elem.classList.add('animated');
        elem.classList.toggle('live');
        setTimeout(() => {
            elem.classList.remove('animated');
        }, 2400);
    });

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg