Reiner CSS3-Designeffekt für Modepreislisten

Kurzes Tutorial

Dies ist eine stilvolle Preisliste, die mit reinem CSS3 erstellt wurde. Die Preisliste wird über Bootstrap erstellt und hat einen flachen Stil mit einem sanften Farbwechseleffekt, wenn die Maus darüber bewegt wird.

So verwenden Sie

HTML-Struktur

Die grundlegende HTML-Struktur der Preisliste ist wie folgt:

<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-Stil

Vervollständigen Sie dies. Alle CSS-Codes der Preisliste lauten wie folgt:

.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; }
  }

Das Obige ist der Inhalt des reinen CSS3-Modepreislisten-Designeffekts. Für weitere verwandte Inhalte achten Sie bitte auf PHP chinesische Website (www.php.cn)!