ocean-flip-card

The command line app for ocean-flip-card

Install

$ npm i ocean-flip-card

Features

• the card hover or click to flip effect
• 通过给元素初始化，使元素拥有翻转功能，同时可设置翻转背景图；

Usage

$ ocean-flip-card

  Usage: 
  .box1,.box2 {
      position: relative;
      width: 234px;
      height: 260px;
      float: left;
      margin-left: 50px;
      background: #fff;
      text-align: center;
      box-shadow: 1px 1px 10px 1px #ccc;
  }

  <div class="box1">经过翻转</div>
  <div class="box2">点击翻转</div>

  // 经过翻转
  new FlipCard({
      target: '.box1', // 类名
      backImg: './img/flip-img.jpg', // 背景图
      type: 'hover' // 交互类型:点击click或经过hover
  });

  // 点击翻转
  new FlipCard({
      target: '.box2', // 类名
      backImg: './img/flip-img.jpg', // 背景图
      type: 'click' // 交互类型:点击click或经过hover
  });