纯CSS3时尚价格表设计效果

简要教程

这是一款使用纯CSS3制作的时尚价格表。该价格表通过Bootstrap来进行布局，采用扁平风格，鼠标划过时还带有平滑过渡的颜色变化效果。

使用方法

HTML结构

该价格表的基本HTML结构如下：

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <h3 class="heading">Standard</h3>
                    <span class="price-value">
                        <span class="currency">$</span> 10
                        <span class="month">/mo</span>
                    </span>
                </div>
                <div class="pricing-content">
                    <ul>
                        <li>50GB Disk Space</li>
                        <li>50 Email Accounts</li>
                        <li>50GB Monthly Bandwidth</li>
                        <li>10 Subdomains</li>
                        <li>15 Domains</li>
                    </ul>
                    <a href="#" class="read">sign up</a>
                </div>
            </div>
        </div>
  
        <div class="col-md-3 col-sm-6">
            <div class="pricingTable">
                <div class="pricingTable-header">
                    <h3 class="heading">Business</h3>
                    <span class="price-value">
                        <span class="currency">$</span> 20
                        <span class="month">/mo</span>
                    </span>
                </div>
                <div class="pricing-content">
                    <ul>
                        <li>60GB Disk Space</li>
                        <li>60 Email Accounts</li>
                        <li>60GB Monthly Bandwidth</li>
                        <li>15 Subdomains</li>
                        <li>20 Domains</li>
                    </ul>
                    <a href="#" class="read">sign up</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS样式

完成该价格表的所有CSS代码如下：

.pricingTable{
      text-align: center;
  }
  .pricingTable .pricingTable-header{
      padding: 30px 0;
      background: #4d4d4d;
      position: relative;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .pricingTable-header{
      background: #09b2c6;
  }
  .pricingTable .pricingTable-header:before,
  .pricingTable .pricingTable-header:after{
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #d9d9d8;
      position: absolute;
      bottom: 12px;
  }
  .pricingTable .pricingTable-header:before{
      left: 40px;
  }
  .pricingTable .pricingTable-header:after{
      right: 40px;
  }
  .pricingTable .heading{
      font-size: 20px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-top: 0;
  }
  .pricingTable .price-value{
      display: inline-block;
      position: relative;
      font-size: 55px;
      font-weight: bold;
      color: #09b1c5;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .price-value{
      color: #fff;
  }
  .pricingTable .currency{
      font-size: 30px;
      font-weight: bold;
      position: absolute;
      top: 6px;
      left: -19px;
  }
  .pricingTable .month{
      font-size: 16px;
      color: #fff;
      position: absolute;
      bottom: 15px;
      right: -30px;
      text-transform: uppercase;
  }
  .pricingTable .pricing-content{
      padding-top: 50px;
      background: #fff;
      position: relative;
  }
  .pricingTable .pricing-content:before,
  .pricingTable .pricing-content:after{
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #7c7c7c;
      position: absolute;
      top: 12px;
  }
  .pricingTable .pricing-content:before{
      left: 40px;
  }
  .pricingTable .pricing-content:after{
      right: 40px;
  }
  .pricingTable .pricing-content ul{
      padding: 0 20px;
      margin: 0;
      list-style: none;
  }
  .pricingTable .pricing-content ul:before,
  .pricingTable .pricing-content ul:after{
      content: "";
      width: 8px;
      height: 46px;
      border-radius: 3px;
      background: linear-gradient(to bottom,#818282 50%,#727373 50%);
      position: absolute;
      top: -22px;
      z-index: 1;
      box-shadow: 0 0 5px #707070;
      transition: all 0.3s ease 0s;
  }
  .pricingTable:hover .pricing-content ul:before,
  .pricingTable:hover .pricing-content ul:after{
      background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
  }
  .pricingTable .pricing-content ul:before{
      left: 44px;
  }
  .pricingTable .pricing-content ul:after{
      right: 44px;
  }
  .pricingTable .pricing-content ul li{
      font-size: 15px;
      font-weight: bold;
      color: #777473;
      padding: 10px 0;
      border-bottom: 1px solid #d9d9d8;
  }
  .pricingTable .pricing-content ul li:last-child{
      border-bottom: none;
  }
  .pricingTable .read{
      display: inline-block;
      font-size: 16px;
      color: #fff;
      text-transform: uppercase;
      background: #d9d9d8;
      padding: 8px 25px;
      margin: 30px 0;
      transition: all 0.3s ease 0s;
  }
  .pricingTable .read:hover{
      text-decoration: none;
  }
  .pricingTable:hover .read{
      background: #09b1c5;
  }
  @media screen and (max-width: 990px){
      .pricingTable{ margin-bottom: 25px; }
  }

以上就是纯CSS3时尚价格表设计效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！