购物车按钮

先看效果:
购物车按钮_第1张图片
再看代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车按钮展示title>
  <link href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap" type="text/css" rel="stylesheet">
  <script src="https://unpkg.co/gsap@3/dist/gsap.min.js">script>
  <script src="https://assets.codepen.io/16327/Physics2DPlugin3.min.js">script>
  <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js">script>

  <style>
    .add-to-cart {
      --color: #000;
      --background: #fff;
      --drop: #38E739;
      --background-s: 1;
      --text-o: 1;
      --text-x: 10px;
      --bottle-x: -40%;
      --bottle-y: -60px;
      --bottle-s: .4;
      --bottle-r: 0deg;
      --bottle-o: 0;
      --cart-x: -57px;
      --cart-y: -2px;
      --cart-r: 0deg;
      --cart-s: 0.8;
      --check-y: 0px;
      --check-s: 0;
      --check-offset: 8.5px;
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: none;
      outline: none;
      background: none;
      border: none;
      padding: 12px 0;
      margin: 0;
      width: 142px;
      color: var(--color);
      cursor: pointer;
      position: relative;
      text-align: center;
      font: inherit;
    }
    .add-to-cart.clipped {
      -webkit-clip-path: polygon(0 -80px, 100% -80px, 100% 80px, 0 80px);
      clip-path: polygon(0 -80px, 100% -80px, 100% 80px, 0 80px);
    }
    .add-to-cart .background,
    .add-to-cart .cart,
    .add-to-cart .check {
      position: absolute;
      pointer-events: none;
    }
    .add-to-cart .background {
      left: 0;
      top: -4px;
      right: 0;
      bottom: 0;
      display: block;
      fill: var(--background);
      transform: scale(var(--background-s)) translateZ(0);
    }
    .add-to-cart span {
      position: relative;
      z-index: 1;
      line-height: 18px;
      display: block;
      font-size: 14px;
      font-weight: 500;
      opacity: var(--text-o);
      transform: translateX(var(--text-x)) translateZ(0);
    }
    .add-to-cart .drop {
      position: absolute;
      z-index: 1;
      left: 70px;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--drop);
    }
    .add-to-cart .cart {
      z-index: 2;
      bottom: 11px;
      left: calc(50% - 2px);
      transform-origin: 10px 17px;
      transform: translate(var(--cart-x), var(--cart-y)) scale(var(--cart-s)) rotate(var(--cart-r)) translateZ(0);
    }
    .add-to-cart .cart svg {
      display: block;
      width: 24px;
      height: 19px;
      stroke: var(--color);
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      position: relative;
      z-index: 1;
      transform: translateZ(0);
    }
    .add-to-cart .cart img {
      display: block;
      position: absolute;
      bottom: 7px;
      left: 50%;
      opacity: var(--bottle-o);
      transform-origin: 50% 100%;
      transform: translate(var(--bottle-x), var(--bottle-y)) scale(var(--bottle-s)) rotate(var(--bottle-r)) translateZ(0);
    }
    .add-to-cart .check {
      bottom: 0;
      left: 50%;
      padding: 2px;
      background: var(--background);
      border-radius: 50%;
      transform: translate(-50%, var(--check-y)) scale(var(--check-s)) translateZ(0);
    }
    .add-to-cart .check svg {
      display: block;
      width: 10px;
      height: 10px;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke: var(--color);
      stroke-dasharray: 8.5px;
      stroke-dashoffset: var(--check-offset);
    }

    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: "Inter", Arial;
      justify-content: center;
      align-items: center;
      background: #000;
    }
    body .dribbble {
      position: fixed;
      display: block;
      right: 20px;
      bottom: 20px;
    }
    body .dribbble img {
      display: block;
      height: 28px;
    }
    body .twitter {
      position: fixed;
      display: block;
      right: 64px;
      bottom: 14px;
    }
    body .twitter svg {
      width: 32px;
      height: 32px;
      fill: #1da1f2;
    }
  style>
head>
<body>
<button class="add-to-cart">
  <div class="cart">
    <svg viewBox="0 0 24 19">
      <path d="M11.25 17C11.25 17.6904 10.6904 18.25 10 18.25C9.30964 18.25 8.75 17.6904 8.75 17C8.75 16.3096 9.30964 15.75 10 15.75C10.6904 15.75 11.25 16.3096 11.25 17Z" stroke-width="1.5 "/>
      <path d="M19.25 17C19.25 17.6904 18.6904 18.25 18 18.25C17.3096 18.25 16.75 17.6904 16.75 17C16.75 16.3096 17.3096 15.75 18 15.75C18.6904 15.75 19.25 16.3096 19.25 17Z" stroke-width="1.5 "/>
      <path d="M1 1H5L5.91304 4M5.91304 4L8.06853 11.0823C8.32483 11.9245 9.10161 12.5 9.98188 12.5H18.585C19.4329 12.5 20.1887 11.9653 20.471 11.1656L23 4H5.91304Z" stroke-width="2" />
    svg>
    <img srcset="https://assets.codepen.io/165585/alge.png 1x, https://assets.codepen.io/165585/[email protected] 2x" />
  div>
  <span>Add to cartspan>
  <div class="check">
    <svg viewBox="0 0 10 10">
      <path d="M2 5L4 7L8 3" />
    svg>
  div>
  <svg class="background" viewBox="0 0 142 46">
    <path d="M0 19C0 10.7157 6.71573 4 15 4H41.4599C53.6032 4 62.4844 4 72.5547 4C82.6251 4 91.5063 4 103.65 4H137C139.761 4 142 6.23858 142 9V31C142 39.2843 135.284 46 127 46H5C2.23858 46 0 43.7614 0 41V19Z" />
  svg>
button>


<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt="">a>
body>

<script>
  const { to, registerPlugin, set, timeline } = gsap

  gsap.registerPlugin(MorphSVGPlugin, Physics2DPlugin)

  document.querySelectorAll('.add-to-cart').forEach(button => {
    let background = button.querySelector('.background path')
    button.addEventListener('pointerdown', e => {
      if(button.classList.contains('active')) {
        return
      }
      to(button, {
        '--background-s': .97,
        duration: .1
      })
    })
    button.addEventListener('click', e => {
      e.preventDefault()
      if(button.classList.contains('active')) {
        return
      }
      button.classList.add('active')
      to(button, {
        keyframes: [{
          '--background-s': .97,
          duration: .1
        }, {
          '--background-s': 1,
          delay: .1,
          duration: .8,
          ease: 'elastic.out(1, .6)'
        }]
      })
      to(button, {
        '--text-x': '16px',
        '--text-o': 0,
        duration: .2
      })
      to(button, {
        keyframes: [{
          '--cart-x': '-12px',
          '--cart-s': 1,
          duration: .25
        }, {
          '--bottle-s': 1,
          '--bottle-o': 1,
          duration: .15,
          onStart() {
            to(button, {
              duration: .4,
              keyframes: [{
                '--bottle-r': '-8deg'
              }, {
                '--bottle-r': '8deg'
              }, {
                '--bottle-r': '0deg'
              }]
            })
          }
        }, {
          '--bottle-y': '0px',
          duration: .3,
          delay: .15,
          onStart() {
            to(background, {
              keyframes: [{
                morphSVG: 'M0 19C0 10.7157 6.71573 4 15 4H41.4599C53.6032 4 62.4844 12 72.5547 12C82.6251 12 91.5063 4 103.65 4H137C139.761 4 142 6.23858 142 9V31C142 39.2843 135.284 46 127 46H5C2.23858 46 0 43.7614 0 41V19Z',
                duration: .1,
                delay: .18
              }, {
                morphSVG: 'M0 19C0 10.7157 6.71573 4 15 4H41.4599C53.6032 4 62.4844 4 72.5547 4C82.6251 4 91.5063 4 103.65 4H137C139.761 4 142 6.23858 142 9V31C142 39.2843 135.284 46 127 46H5C2.23858 46 0 43.7614 0 41V19Z',
                duration: .8,
                ease: 'elastic.out(1, .6)'
              }]
            })
            to(button, {
              '--bottle-s': .5,
              duration: .15
            })
          }
        }, {
          '--cart-y': '3px',
          duration: .1,
          onStart() {
            to(button, {
              keyframes: [{
                '--check-y': '24px',
                '--check-s': 1,
                duration: .25
              }, {
                '--check-offset': '0px',
                duration: .25
              }]
            })
          }
        }, {
          '--cart-y': '0px',
          duration: .2
        }, {
          '--cart-x': '-6px',
          '--bottle-r': '12deg',
          '--bottle-x': '-25%',
          duration: .15
        }, {
          '--cart-x': '-16px',
          '--bottle-r': '-12deg',
          '--bottle-x': '-50%',
          duration: .2,
          onStart() {
            drops(button, 5, -130, -100);
          },
        }, {
          '--cart-x': '92px',
          '--cart-r': '-20deg',
          duration: .4,
          onStart() {
            button.classList.add('clipped')
          },
          onComplete() {
            set(button, {
              '--cart-x': '-120px',
              '--cart-s': .8,
              '--cart-y': '-2px',
              '--bottle-o': 0,
              '--text-x': '2px'
            })
          }
        }, {
          '--cart-x': '-57px',
          '--cart-r': '0deg',
          '--check-s': 0,
          duration: .3,
          delay: .1,
          clearProps: true,
          onStart() {
            to(button, {
              '--text-x': '10px',
              '--text-o': 1,
              duration: .2,
              delay: .1
            })
          },
          onComplete() {
            button.classList.remove('active', 'clipped')
          }
        }]
      })
    })
  })

  function drops(parent, quantity, minAngle, maxAngle) {
    for(let i = quantity - 1; i >= 0; i--) {
      let angle = gsap.utils.random(minAngle, maxAngle),
              velocity = gsap.utils.random(60, 80)

      let div = document.createElement('div')
      div.classList.add('drop')

      parent.appendChild(div);

      set(div, {
        opacity: 1,
        scale: 0,
      });
      timeline({
        onComplete() {
          div.remove();
        }
      }).to(div, {
        duration: .4,
        scale: gsap.utils.random(.5, .7)
      }, 0).to(div, {
        duration: 1,
        physics2D: {
          angle: angle,
          velocity: velocity,
          gravity: 80
        }
      }, 0).to(div, {
        duration: .3,
        opacity: 0
      }, .3);
    }
  }

script>
html>

你可能感兴趣的:(CSS,css,css3,javascript)