当前位置：首页 > 网页特效 > 表格

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

分类：表格日期：2024-05-14 点击(4) 评论(0)

简介

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

```html
<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> 
  
          <div class="cd-pricing-body">
            <ul class="cd-pricing-features">
              <li><em>256MB</em> Memory</li>
              
            </ul>
          </div> 
  
          <footer class="cd-pricing-footer">
            <a class="cd-select" href="http://www.htmleaf.com/">Select</a>
          </footer> 
        </li>
  
        <li data-type="yearly" class="is-hidden">
          
        </li>
      </ul> 
    </li>
  
    <li class="cd-popular">
      <ul class="cd-pricing-wrapper">
        <li data-type="monthly" class="is-visible">
          
        </li>
  
        <li data-type="yearly" class="is-hidden">
          
        </li>
      </ul>
    </li> 
  
    <li>
      <ul class="cd-pricing-wrapper">
        <li data-type="monthly" class="is-visible">
          
        </li>
  
        <li data-type="yearly" class="is-hidden">
          
        </li>
      </ul> 
    </li>
  </ul> 
</div> 
```
##### CSS样式
在小屏幕上，.cd-pricing-footer被设置为position: absolute，并将其放在.cd-pricing-header上。按钮被设置为display: block和height: 100%，这样按钮有和表格底部相同高度的尺寸。并对 .cd-pricing-header使用 pointer-events: none来使按钮可点击。

```html
.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。

##### JAVASCRIPT
为使价格表旋转，你可以查看jQuery和css3弹性3d图片翻转分组展示特效的使用方法。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果