svg+js实现订阅按钮点击交互动画效果代码

代码语言:html

所属分类:动画

代码描述:svg+js实现订阅按钮点击交互动画效果代码

代码标签: svg js 订阅 按钮 点击 交互 动画

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

<html>

<head>
    <style>
        .unsub-button {
          background: none;
          border: 0;
          color: #222;
          display: block;
          font-family: "Quicksand", sans-serif;
          font-size: 13px;
          font-weight: 600;
          height: 40px;
          outline: none;
          padding-right: 32px;
          position: relative;
          width: 160px;
          -webkit-tap-highlight-color: transparent;
        }
        .unsub-button.ready {
          cursor: pointer;
        }
        .unsub-button.clicked::before {
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          height: 32px;
          width: 128px;
        }
        .unsub-button.clicked .unsub-button__icon {
          opacity: 0;
          transform: translate(-150%, -50%) scale(0);
        }
        .unsub-button.clicked .unsub-button__default-text {
          opacity: 0;
          transform: translate(10%, 0%) scale(0);
        }
        .unsub-button.clicked .unsub-button__confirm-text .word {
          opacity: 1;
          top: 0;
        }
        .unsub-button.clicked .unsub-button__confirm-text .char {
          animation-name: bounce;
        }
        .unsub-button.show-instructions .unsub-button__confirm-text {
          opacity: 0;
        }
        .unsub-button.show-instructions .unsub-button__instruction-text {
          opacity: 1;
          top: 110%;
        }
        .unsub-button.show-instructions .unsub-button__kid {
          pointer-events: auto;
        }
        .unsub-button.show-instructions .unsub-button__kid-wrapper {
          transform: translate(0px, 20px) rotate(0);
        }
        .unsub-button.show-instructions .target {
          cursor: pointer;
        }
        .unsub-button.show-instructions.happy .happy {
          opacity: 1;
        }
        .unsub-button.show-instructions.worried .worried {
          opacity: 1;
        }
        .unsub-button.show-instructions.sad::after {
          color: #222;
          opacity: 1;
          transition: opacity 600ms linear 400ms, color 400ms linear 1400ms;
        }
        .unsub-button.show-instructions.sad .sad {
          opacity: 1;
        }
        .unsub-button::before {
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
          content: "";
          display: block;
          height: 100%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: width 300ms ease-in-out, height 300ms ease-in-out, box-shadow 300ms linear;
          width: 100%;
          z-index: 1;
        }
        .unsub-button::after {
          align-items: center;
          background: #fff;
          color: #fff;
          content: "How could you...";
          display: flex;
          height: 100vh;
          justify-content: center;
          left: 50%;
          min-width: 300px;
          opacity: 0;
          pointer-events: none;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: opacity 600ms linear 2000ms, color 600ms linear 1400ms;
          width: 33.34vw;
          z-index: 10;
        }
        .unsub-button__default-text {
          display: block;
          opacity: 1;
          position: relative;
          transform: none;
          transition: opacity 200ms linear, transform 200ms ease;
          z-index: 3;
        }
        .unsub-button__icon {
          fill: none;
          stroke: #222;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 5;
          opacity: 1;
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translate(0, -50%);
          transition: opacity 200ms linear, transform 200ms ease;
          width: 24px;
          z-index: 2;
        }
        .unsub-button__icon .cancel-color {
          stroke: #ff6161;
        }
        .unsub-button__confirm-text {
          left: 50%;
          opacity: 1;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: opacity 200ms linear;
          white-space: nowrap;
          z-index: 3;
        }
        .unsub-button__confirm-text .word {
          margin-right: 5px;
          opacity: 0;
          position: relative;
          top: -5px;
          transition: opacity 400ms linear var(--word-delay), top 400ms linear var(--word-delay);
        }
        .unsub-button__confirm-text .word--bold {
          color: #ff6161;
          margin: 0;
          transition: opacity 400ms linear var(--word-delay);
          white-space: nowrap;
        }
        .unsub-button__confirm-text .word .char {
          --bounceHeight: -5px;
          animation-duration: 400ms;
          animation-direction: alternate;
          animation-delay: var(--char-delay);
          animation-iteration-count: 2;
          display: inline-block;
        }
        .unsub-button__instruction-text {
          color: #fff;
          left: 50%;
          opacity: 0;
          pointer-events: none;
          position: absolute;
          top: 100%;
          transform: translate(-50%, 0%);
          transition: top 500ms ease 700ms, opacity 300ms linear 700ms;
          white-space: nowrap;
          z-index: 3;
        }
        .unsub-button__kid {
          bottom: 4px;
          left: 50%;
          pointer-events: none;
          position: absolute;
          transform: translate(-50%, 0%);
          width: 150px;
          z-index: 5;
        }
        .unsub-button__kid-wrapper {
          transform: translate(0%, 100%) rotate(20deg);
          transform-origin: 50% 100%;
          transition: transform 600ms cubic-bezier(0.6, 1.45, 0.75, 1);
        }
        .unsub-button__kid .happy,
        .unsub-button__kid .worried,
        .unsub-button__kid .sad {
          opacity: 0;
        }
        .unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper {
          transform: translate(0, 20px);
        }
        .unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper-inner {
          animation-name: balloonRock;
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopMask {
          opacity: 1;
          transform: scale(1);
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopPiece {
          opacity: 1;
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopPiece--string {
          transform: scaleY(0.6);
          transform-origin: 60% 80%;
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopPiece--1 {
          transform: translate(35px, -25px);
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopPiece--2 {
          transform: translate(-40px, -10px);
        }
        .unsub-button--balloon.show-instructions.sad .balloonPopPiece--3 {
          transform: translate(50px, 10px);
        }
        .unsub-button--balloon .unsub-button__kid .balloonPopMask {
          opacity: 0;
          transform: scale(0);
          transform-origin: 188px 86px;
          transition: transform 150ms linear;
        }
        .unsub-button--balloon .unsub-button__kid .balloonPopPiece {
          opacity: 0;
          transition: transform 1200ms ease-out, opacity 100ms linear;
        }
        .unsub-button--balloon .unsub-button__balloon-wrapper {
          transform: translate(0%, 100%);
          transform-origin: 50% 100%;
          transition: transform 800ms ease-in;
        }
        .unsub-button--balloon .unsub-button__balloon-wrapper-inner {
          animation-delay: 700ms;
          animation-duration: 2000ms;
          animation-fill-mode: forwards;
          animation-iteration-count: 1;
          animation-timing-function: ease-out;
          transform: rotate(8deg);
          transform-origin: 60% 80%;
        }
        .unsub-button--ice-cream::after {
          content: "Shame on you...";
        }
        .unsub-button--ice-cream.show-instructions .icecreamPieces {
          animation-name: bounce;
        }
        .unsub-button--ice-cream.show-instructions .drip {
          transform: none;
        }
        .unsub-button--ice-cream.show-instructions.sad .icecreamPieces {
          transition: transform 1200ms ease-out;
        }
        .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--cherry {
          transform: translate(30px, 45px) rotate(180deg);
        }
        .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--top {
          transform: translate(-10px, 55px) rotate(90deg);
        }
        .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--middle {
          transform: translate(-80px, 15px) rotate(-120deg);
        }
        .unsub-button--ice-cream.show-instructions.sad .icecreamPieces--bottom {
          transform: translate(-25px, 25px) rotate(-60deg);
        }
        .unsub-button--ice-cream.show-instructions.sad .drip {
          display: none;
        }
        .unsub-button--ice-cream .unsub-button__kid-wrapper {
          transform: translate(0%, 100%) rotate(-10deg);
          transition: transform 400ms cubic-bezier(0.6, 1.45, 0.75, 1);
        }
        .unsub-button--ice-cream .icecreamPieces {
          animation-delay: 100ms;
          animation-direction: alternate;
          animation-iteration-count: 2;
        }
        .unsub-button--ice-cream .icecreamPieces--cherry {
          --bounceHeight: -40px;
          animation-duration: 250ms;
          transform-origin: 37% 14%;
        }
        .unsub-button--ice-cream .icecreamPieces--top {
          --bounceHeight: -35px;
          animation-duration: 200ms;
          transform-origin: 37% 24%;
        }
        .unsub-button--ice-cream .icecreamPieces--middle {
          --bounceHeight: -25px;
          animation-duration: 150ms;
          transform-origin: 37% 46%;
        }
        .unsub-button--ice-cream .icecreamPieces--bottom {
          --bounceHeight: -15px;
          animation-duration: 100ms;
          transform-origin: 37% 60%;
        }
        .unsub-button--ice-cream .drip {
          transform: translateY(-12px);
          transition: transform 800ms ease-out 400ms;
        }
        .unsub-button--ice-cream .drip--slow {
          transition: transform 1200ms ease-out 800ms;
        }
        .unsub-button--flower::after {
          content: "You monster...";
        }
        .unsub-button--flower.show-instructions.sad::before {
          transform: translate(-50%, -50%) rotate(6deg);
          transition: transform 1ms linear 250ms;
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano {
          bottom: 4px;
          opacity: 1;
          transform: translate(-50%, 0%) rotate(6deg);
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano-wrapper {
          transform: none;
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .lid {
          transform: translateY(10px) rotate(-5deg);
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .crack {
          opacity: 1;
          transform: none;
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--1 {
          transform: translate(120px, -110px);
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--2 {
          transform: translate(-100px, -60px);
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--3 {
          transform: translate(40px, -180px);
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .debris-spin {
          animation-name: spin;
        }
        .unsub-button--flower.show-instructions.sad .unsub-button__piano .dust {
          opacity: 0.2;
          transform: scale(1.3) translateY(-20px);
        }
        .unsub-button--flower .unsub-button__kid-wrapper {
          transform: translate(0%, 100%) rotate(-10deg);
        }
        .unsub-button--flower .unsub-button__piano {
          bottom: 600px;
          left: 50%;
          opacity: 0;
          pointer-events: none;
          position: absolute;
          transform: translate(-50%, 0%);
          transform-origin: 50% 100%;
          transition: opacity 100ms linear, bottom 250ms linear, transition 1ms linear 250ms;
          width: 300px;
          z-index: 6;
        }
        .unsub-button--flower .unsub-button__piano-wrapper {
          transform: translate(0, -60px);
          transition: transform 25ms linear 250ms;
        }
        .unsub-button--flower .unsub-button__piano .lid {
          transform: translateY(-10px) rotate(4deg);
          transform-origin: 50% 60%;
          transition: transform 100ms linear 250ms;
        }
        .unsub-button--flower .unsub-button__piano .crack {
          opacity: 0;
          transform: scale(0);
          transform-origin: 30% 46%;
          transition: transform 100ms linear 250ms;
        }
        .unsub-button--flower .unsub-button__piano .crack--2 {
          transform-origin: 80% 50%;
        }
        .unsub-button--flower .unsub-button__piano .debris {
          transform: none;
          transition: transform 800ms ease-out 300ms;
        }
        .unsub-button--flower .unsub-button__piano .debris--1 .debris-spin {
          animation-duration: 300ms;
          transform-origin: 67% 96%;
        }
        .unsub-button--flower .unsub-button__piano .debris--2 .debris-spin {
          animation-duration: 600ms;
          transform-origin: 40% 100%;
        }
        .unsub-button--flower .unsub-button__piano .debris--3 .debris-spin {
          animation-duration: 650ms;
          transform-origin: 58% 105%;
        }
        .unsub-button--flower .unsub-button__piano .debris-spin {
          animation-duration: 300ms;
          animation-delay: 250ms;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        .unsub-button--flower .unsub-button__piano .dust {
          opacity: 0;
          transform: none;
          transform-origin: 40% 100%;
          transition: transform 800ms ease-out 250ms, opacity 1ms linear 250ms;
        }
        
        @keyframes balloonRock {
          0% {
            transform: rotate(8deg);
          }
          35% {
            transform: rotate(-3deg);
          }
          85% {
            transform: rotate(1deg);
          }
          100% {
            transform: none;
          }
        }
        @keyframes bounce {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(var(--bounceHeight));
          }
        }
        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
        /**** Wrapper styles ****************/
        html,
        body {
          height: 100%;
        }
        
        body {
          display: flex;
          min-width: 900px;
          -webkit-font-smoothing: antialiased;
        }
        
        .background {
          align-items: center;
          background: #38a3a5;
          display: flex;
          flex: 1;
          height: 100%;
          justify-content: center;
          overflow: hidden;
          position: relative;
        }
        .background::after {
          bottom: 15px;
          color: #fff;
          content: "2.";
          font-family: "Quicksand", sans-serif;
          font-size: 24px;
          font-weight: 600;
          left: 30px;
          opacity: 0.6;
          position: absolute;
        }
        .background:first-of-type {
          background: #22577a;
        }
        .background:first-of-type::after {
          content: "1.";
        }
        .background:last-of-type {
          background: #57cc99;
        }
        .background:last-of-type::after {
          content: "3.";
        }
    </style>

</head>

<body>
<!-- Button 1 -->
<section class="background">
  <button class="unsub-button unsub-button--balloon">
    <span class="unsub-button__default-text">Unsubscribe</span>
    <svg class="unsub-button__icon" viewBox="0 0 83.4 64">
      <path d="M6.5 15.3l30 20.4 30-20.4"/>
      <path d="M45.1 51.8H6.5V15.3h60v12.1"/>
      <circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
      <path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
    </svg>
    <span class="unsub-button__confirm-text">Are you sure?</span>
    <span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
    <svg class="unsub-button__kid" viewBox="0 0 300 300">
      <g class="unsub-button__kid-wrapper">
        <path d="M162.3 241.3s7.1 5.4 10.1 7.4c1 .7 6.1-6.3 6.1-6.3l11.8 12.8s-13.5 8.5-14.7 9.3c-3.6 2.5-13-2.1-17.5-4.1-4.4-2-4.8-7-4.8-7l5-10 4-2.1z" fill="#e2d0bc"/>
        <path d="M81.4 254.9H70.9c0-19.4 16.3-29.2 25.6-30.4h37.4c16.1 0 32.4 17.7 33.3 19.2-2 1.7-9.1 13-8.2 17.7.1.5-11.2-1.3-12-1.8-.7 1.2 1.1 41.6 1.1 41.6l-66.4-1.1-.3-45.2z" fill="#57cc99"/>
        <path d="M73.7 254.9h12l4.1 46-11.5.1c-.1.1-4.2-32.4-4.6-46.1M128 228.2c0 4.5-6.7 5.7-12.2 5.7s-12.2-1.6-12.2-5.7v-20.6H128v20.6z" fill="#e2d0bc"/>
        <path d="M128 221.1s-6.7 1.6-12.2 1.6-12.2-1.5-12.2-1.5v-24.8H128v24.7z" fill="#d3c2b2"/>
        <path d="M152.5 178.8c4.5 1.6 10.8-4.7 11.2-11.2.4-6.6-3.7-12.2-9.7-12.5.2 7.8-.2 16.1-1.5 23.7z" fill="#f2d8bc"/>
        <path d="M159.7 160.3c0 33.5-12.2 60.5-40.4 60.5-27.7 0-50-27.1-50-60.7s28.1-36.4 46.4-36.4c23.9-.1 44 3 44 36.6z" fill="#ffe8cc"/>
        <path d="M119.3 220.7c-10.4 0-20-3.8-28-10.4C78 199.5 69.2 181 69.2 160.1c0-4.8.6-8.9 1.6-12.5 4.4 41.2 12.2 63.3 48.5 73.1z" opacity=".05" fill="#010101"/>
        <path d="M160.2 134.5c-1.3-3.9-1.7-8.9-3.5-12-.3-.5-1.3-1.7-2.4-2.1-3-4.1-5.1-6.6-9.4-8.9-1.4-.8-12.6-12.7-14.2-13.3-1.2-.5.5 9.5-2.5 7.8-6-3.3-14.7-11.3-17.4-11.7-3.3-.5 1.7 11.3-2 11.3-6.9 0-12.8-6.8-16.1-7.4-.3 5.6-1 11.7-3.8 13.5-2.5 1.5-8.8-2.3-10.9-.2 1.7 5.1-.1 7.7-.4 11.2-1.4.8-3.3 1.3-3.3 1.3-2.1 3.4-2.1 6.7-3.5 11.2s-2.5 9.6-3.2 15.4c-.7 5.7.2 12.2 1.5 15.6 8.6 22.1 10.4-23 17.1-29.9 6.8-6.9 31.5-4 31.5-4s29.4-4.6 34.9 2.8c5.5 7.4 6.9 46.8 6.9 25.1.2-14.5 3.6-16.6.7-25.7z" fill="#f2cf70"/>
        <path d="M110.8 94.3c-2.9-.4.6 8.8-1 10.8 2.9-.9 1.6-10.9 1-10.8zm-18.1 3.8c-.3 5.6-1.4 12.9-5.5 13.8 2 0 3.3.3 5.7-2.7 2.3-2.9 3.1-10.5-.2-11.1zM78 111.5c1.7 5.1-.1 7.7-.4 11.2-1.4.8-3.3 1.3-3.3 1.3-2.1 3.4-2.1 6.7-3.5 11.2s-2.5 9.6-3.2 15.4c-.7 5.7 3-8.2 9.3-15.8 6.2-7.5 3.1-25.5 1.1-23.3z" fill="#d8b45b"/>
        <path d="M126.5 181c0-2.1-3.2-3.7-7.1-3.6s-7 1.8-7 3.8c.1 2.1 14.2 1.9 14.1-.2z" fill="#d3bfae"/>
        <g class="happy">
          <path d="M119.6 207.6c-6.7 0-13.7-5.3-13.7-10.6 0-2.4 1.8-3.6 4.4-3.6s4.9.8 9.3.8c4.3 0 6.8-.8 9.3-.8 2.4 0 4.4 1.2 4.4 3.6 0 5.8-7 10.6-13.7 10.6z" fill="#824547"/>
          <path d="M119.6 207.6c1.5 0 3-.2 4.4-.7-.2-2.9-2.7-5.2-5.7-5.2-2.6 0-4.8 1.8-5.5 4.2 2.1 1 4.5 1.7 6.8 1.7z" fill="#f37879"/>
        </g>
        <g class="worried sad">
          <path d="M133.3 201.5c0 2.3-1.9 4.4-4.3 4.4s-4.9-.8-9-.8c-4.3 0-6.5.8-9 .8s-4.3-2.1-4.3-4.4c0-5 6.8-8.1 13.3-8.1 6.5 0 13.3 2.7 13.3 8.1z" fill="#824547"/>
          <path d="M120 205.1c1.4 0 2.6.1 3.6.2-.8-2.1-2.9-3.6-5.3-3.6a5.7 5.7 0 00-5.5 4.1c1.9-.2 4-.7 7.2-.7z" fill="#f37879"/>
        </g>
        <ellipse cx="93.2" cy="186.2" rx="9.5" ry="8.1" fill="#fcd7cf"/>
        <ellipse cx="145" cy="186.2" rx="8.8" ry="8.1" fill="#fcd7cf"/>
        <g class="happy worried">
          <circle cx="103.5" cy="164.5" r="12.5" fill="#fff"/>
          <circle cx="105.6" cy="162.3" r="7" fill="#010101"/>
          <circle cx="135.7" cy="164.5" r="12.5" fill="#fff"/>
          <circle cx="137.9" cy="162.3" r="7" fill="#010101"/>
        </g>
        <path d="M76.1 177.4c-4.2 2.1-9-1.1-10.3-7.5-1.3-6.5 2.1-12.5 8-13.7.8 7.9 0 13.9 2.3 21.2z" fill="#ffe8cc"/>
        <g class="happy sad" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M90.2 153.8s6.4-1.6 9.5-6.9M150 154.1s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <g class="worried" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M88.2 151.8s6.4-1.6 9.5-6.9M152 152.1s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <g class="sad">
          <path d="M82.6 186.3c-1.3 1.7-3.7 2.1-5.4.9s-2.1-3.7-.9-5.4c1.3-1.7 8-8 9.7-6.8 1.8 1.2-2.1 9.6-3.4 11.3zM73.5 207.9c-.6 2.1-2.8 3.2-4.8 2.6s-3.2-2.8-2.6-4.8c.6-2.1 4.9-10.2 6.9-9.6 2.1.6 1.1 9.8.5 11.8zM155.8 185.3c1.3 1.7 3.7 2.1 5.4.9s2.1-3.7.9-5.4c-1.3-1.7-8-8-9.7-6.8-1.8 1.2 2.1 9.6 3.4 11.3zM163.9 203.9c.6 2.1 2.8 3.2 4.8 2.6 2.1-.6 3.2-2.8 2.6-4.8-.6-2.1-4.9-10.2-6.9-9.6-2.1.6-1.1 9.8-.5 11.8z" fill="#a4edff"/>
          <path d="M94.2 167c6.1-5 12.4-4.7 18.6-2.8M144.5 165c-6.7-4.3-12.4-3.3-18.3-.6" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/>
        </g>
        <path d="M193.8 240.8c1.5 6.3-.6 14.9-5.7 16.2-5.1 1.3-10.6-1.5-12.1-7.8s2.6-15.2 7.8-14.5c5.4.7 9.2 2.7 10 6.1z" fill="#ffe8cc"/>
      </g>
      <g class="unsub-button__balloon-wrapper">
        <g class="unsub-button__balloon-wrapper-inner">
          <radialGradient id="gradient" cx="186.95" cy="-179.25" r="58.2334" fx="218.4946" fy="-209.7223" gradientTransform="matrix(1 0 0 1 0 270)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#ff8080"/>
            <stop offset="1" stop-color="#d12a2a"/>
          </radialGradient>
          <g class="sad">
            <g class="balloonPopPiece balloonPopPiece--string">
              <path d="M185.2 234.9c-10.7-17-5.6-60 15.8-74.8" fill="none" stroke="#fff" stroke-miterlimit="10"/>
              <path d="M211.2 164.9c-8.7-2-2.8-2.9-6-6.3-1 .7-2.1 4.6-2.1 4.6l-4.5-6.6s4.3.6 5.3-.1c-1.4-3.6-10.6-3.6-5.4-6.2 3.4-1.7 7.2.4 9.3 2.8 3.4 3.7 7.2 1.1 7.3 3.9.1 3.6-7.9-.4-6 2.6 2.2 3.2 6.2 6.2 2.1 5.3z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
              <path d="M204.6 157.9s-1.4 12.9-5.1 9.1c-3.8-3.8 5.1-9.1 5.1-9.1s-8.6 4.5-10.7.9c-2.2-3.7 10.7-.9 10.7-.9z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            </g>
            <path class="balloonPopPiece balloonPopPiece--1" d="M231.2 73.3c-1.8-9.7 4.1-8.5-2.5-12.1-4.2-2.3-9.9-3.8-15-8.6-5.4-5.2 7-6 2.1-12.2-4.9-6.3-10.4 2.5-13-2.9-4.2-8.8-23.3-13.4-15.9-13.4 10.4 0 20 3.4 28 9.4 4.4 3.3 5.9 15.4 10.4 20.1 3.3 3.5 10.1-.8 11.7 3.4 2.8 7.2-4.3 24.9-5.8 16.3z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path class="balloonPopPiece balloonPopPiece--2" d="M155.9 89.4c1.6 8.2-12.2-8.8-11.4-15.6.5-4.4 4.2 3.8 9.3-1 3-2.8-4.9-6.8-1.9-11.1 4.1-5.7 9.6.3 11.8 2.7 1.6 1.7 9.7-5.1 11.1 2.7 1 5.7-9.4-.4-11.6 2.7-1.9 2.5 1.8 4.1-.3 6.4-3.6 3.8-9.1 2.5-7 13.2z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path class="balloonPopPiece balloonPopPiece--3" d="M226.2 102.7c8.1 2-7.3 1.6-3.3 7.3 2.5 3.7 2.5 8.3-.8 7.9-2.3-.2-3.9 10.3-10.1 5.3-4.5-3.7 7.3-5.9 6.9-9.8-.3-3.1-4.1-1.9-4-5 .1-5 6.3-6.9 11.3-5.7z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
          </g>
          <path class="happy worried" fill="none" stroke="#fff" stroke-miterlimit="10" d="M185.2 234.9l1.1-80.9"/>
          <mask id="balloonPopMask">
            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
            <circle class="balloonPopMask" fill="black" cx="188" cy="86" r="72" />
          </mask>
          <g class="target" mask="url(#balloonPopMask)">
            <path d="M237 81.4c0 32-34.3 69.1-49.6 71.7 0 1.2 2.6 4.3 2.6 4.3h-8s2.9-3.2 2.9-4.4c-15.4-3.6-48-40.5-48-71.6 0-33.1 22.4-57.3 50-57.3S237 48.3 237 81.4z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path d="M202.4 36.7s21.9 8.7 27.1 27.8c5.4 19.9-4.1 33.1-4.1 33.1s2.3-6 .4-24c-2.4-21.9-23.4-36.9-23.4-36.9z" fill="#fff"/>
          </g>
          <path class="happy worried" d="M186.5 153.2s9.9 8.4 4.7 9.3c-5.3 1-4.7-9.3-4.7-9.3s-1.1 9.6-5.2 9.4c-4.3-.3 5.2-9.4 5.2-9.4z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
        </g>
      </g>
    </svg>                            
  </button>
</section>

<!-- Button 2 -->
<section class="background">
  <button class="unsub-button unsub-button--ice-cream">
    <span class="unsub-button__default-text">Unsubscribe</span>
    <svg class="unsub-button__icon" viewBox="0 0 83.4 64">
      <path d="M6.5 15.3l30 20.4 30-20.4"/>
      <path d="M45.1 51.8H6.5V15.3h60v12.1"/>
      <circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
      <path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
    </svg>
    <span class="unsub-button__confirm-text">Are you sure?</span>
    <span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
    <svg class="unsub-button__kid" viewBox="0 0 300 300">
      <g class="unsub-button__kid-wrapper">
        <path d="M151 242.3l5.1 10.2s-.4 4.1-4.9 6.1c-4.6 2-15.5 6.1-19.2 3.5-1.2-.8-20-11.1-20-11.1l8.9-13.3s13.3 10.1 14.3 9.4c3.1-2 11.8-7 11.8-7l4 2.2z" fill="#e2d0bc"/>
        <path d="M228.1 300.1l-66.7 1.1s1.8-43.2 1.1-44.5c-.8.5-11.3 3.4-11.2 2.9.9-4.8-6.3-16.9-8.4-18.6.9-1.5 22.4-18 32.9-18H214c6.8.9 27.1 11.6 27.1 31-6.4 0-11.4.3-11.4.3l-1.6 45.8z" fill="#22577a"/>
        <path d="M238.3 254c-.2 5.8.1 16.5.1 23.5 0 6.8-5.8 23.6-5.8 23.5l-10.7-.1s4-19.4 4.1-23.4c-.8-3-2.7-14-2.7-23 1.9 0 12.9-.5 12.9-.5M181.9 205.7h24.9v21c0 4.2-6.8 5.8-12.4 5.8-5.6 0-12.4-1.2-12.4-5.8v-21z" fill="#e2d0bc"/>
        <path d="M181.9 194.3h24.9v25.3s-6.8 1.5-12.4 1.5c-5.6 0-12.4-1.6-12.4-1.6v-25.2z" fill="#d3c2b2"/>
        <path d="M159.7 149.5c-6.1-.2-10.7 5.2-10.8 12-.1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0