010. 为你的加购按钮添加晃动效果 吸引客户购买

点击这里查看视频教程

第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺

限时福利：既可用于创建新的店铺，也可以创建测试店铺（例如免费试用插件 APP 等），避免测试插件时代码残留在主题中，拖慢店铺网速。

Shopify BlogShopify2006

主题 CSS 代码中添加样式

@-webkit-keyframes btn-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  60% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }

}

@keyframes btn-shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  20%,
  30% {
    -webkit-transform: translate3d(-3px, 0, 0);
    transform: translate3d(-3px, 0, 0);
  }

  15%,
  35% {
    -webkit-transform: translate3d(3px, 0, 0);
    transform: translate3d(3px, 0, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.btn-shake {
  -webkit-animation-name: btn-shake;
  animation-name: btn-shake;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

加购按钮上添加 class

btn-shake 

同样适用于 Buy it Now 按钮

有帮助? 请 up 主喝奶茶（页面右侧）