jQuery和css3超酷价格表3D旋转特效

PetitQ 表单/表格 2020-12-25 1.54K 0 0

这是一款超酷 jQuery 和 css3 价格表 3d 旋转特效插件。在插件中设计了 3 种不同样式的价格表，还集成了 jQuery 和 css3 弹性 3d 图片翻转分组展示特效用于将价格表从一面旋转到另一面。在小屏幕上，我们使用另一种方案：将所有的价格表垂直排列，然后将价格表的内容水平排列，超出屏幕部分使用水平滚动条，这样，用户可以在同一个屏幕上比较 3 个表格的内容，利于用户体验。

HTML 结构:

html 结构包含两个部分：div.cd-pricing-switcher 包含用于过滤的按钮。ul.cd-pricing-list 包含价格表。在.cd-pricing-list 中的每一个列表项都嵌套一个二级的 ul 元素（用于旋转的那一面）。

也想出现在这里？联系我们吧

```
<div class="cd-pricing-container">
```
```
  <div class="cd-pricing-switcher">
```
```
    <p class="fieldset">
```

      <input type="radio" name="duration" value="monthly" id="monthly" checked>

      <label for="monthly">Monthly</label>

      <input type="radio" name="duration" value="yearly" id="yearly">

      <label for="yearly">Yearly</label>

```
      <span class="cd-switch"></span>
```
```
    </p>
```
```
  </div> 
```
```
 
```
```
  <ul class="cd-pricing-list">
```
```
    <li>
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <header class="cd-pricing-header">

```
            <h2>Basic</h2>
```
```
            <div class="cd-price">
```

              <span class="cd-currency">$</span>

              <span class="cd-value">30</span>

              <span class="cd-duration">mo</span>

```
            </div>
```

          </header> <!-- .cd-pricing-header -->

```
 
```
```
          <div class="cd-pricing-body">
```

            <ul class="cd-pricing-features">

              <li><em>256MB</em> Memory</li>

              <!-- other features here -->

```
            </ul>
```

          </div> <!-- .cd-pricing-body -->

```
 
```

          <footer class="cd-pricing-footer">

            <a class="cd-select" href="http://www.htmleaf.com/">Select</a>

          </footer> <!-- .cd-pricing-footer -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```

      </ul> <!-- .cd-pricing-wrapper -->

```
    </li>
```
```
 
```
```
    <li class="cd-popular">
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <!-- pricing table content here -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```
```
      </ul>
```
```
    </li> 
```
```
 
```
```
    <li>
```
```
      <ul class="cd-pricing-wrapper">
```

        <li data-type="monthly" class="is-visible">

          <!-- pricing table content here -->

```
        </li>
```
```
 
```

        <li data-type="yearly" class="is-hidden">

          <!-- pricing table content here -->

```
        </li>
```

      </ul> <!-- .cd-pricing-wrapper -->

```
    </li>
```
```
  </ul> 
```
```
</div> 
```

CSS 样式:

在小屏幕上，.cd-pricing-footer 被设置为 position: absolute，并将其放在.cd-pricing-header 上。按钮被设置为 display: block 和 height: 100%，这样按钮有和表格底部相同高度的尺寸。并对 .cd-pricing-header 使用

pointer-events: none来使按钮可点击。

```
.cd-pricing-header {
```
```
  height: 80px;
```
```
  pointer-events: none;
```
```
}
```
```
.cd-pricing-body {
```
```
  overflow-x: auto;
```

  /* smooth scrolling on touch devices */

```
  -webkit-overflow-scrolling: touch;
```
```
}
```
```
.cd-pricing-footer {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  height: 80px;
```
```
  width: 100%;
```
```
}
```
```
.cd-select {
```
```
  display: block;
```
```
  height: 100%;
```
```
  /* hide button text on mobile */
```
```
  overflow: hidden;
```
```
  text-indent: 100%;
```
```
  white-space: nowrap;
```
```
  color: transparent;
```
```
}
```

在大屏幕上（屏幕尺寸大于 1170px），CSS 样式十分简单，你可以参照 css 文件上的注释。

重要提示：我们创建 3 个 class 来定制三个价格表（所有的 class 都被阴影到.cd-pricing-container 元素上）。

    cd-full-width-为.cd-pricing-container元素设置100%宽度，max-width: none（默认情况下我们设置宽度为90%和max-width为1170px）

```
 
```

    cd-tables-have-margin-为价格表添加一个右边的margin

```
 
```

    cd-secondary-theme-用于实现不同的颜色theme

在 demo 中我们创建了组价格表样式：第一组为默认的样式;第二组使用了.cd-full-width 和.cd-second-theme class;第三组使用了.cd-tables-have-margin class。

jQuery 和 css3 超酷价格表 3D 旋转特效

已有 385 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

jQuery和css3超酷价格表3D旋转特效

HTML 结构:

CSS 样式:

jQuery 和 css3 超酷价格表 3D 旋转特效

相关文章

带搜索过滤国家地区选择下拉框jQuery插件

多种纯CSS3搜索框UI设计效果

ui choose - 列表选择jQuery美化插件

发表回复取消回复

热销模板

表单/表格

HTML 结构:

CSS 样式:

jQuery 和 css3 超酷价格表 3D 旋转特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复