最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

纯CSS3时尚价格表设计效果

来源:懂视网 责编:小采 时间:2020-11-27 18:53:31
文档

纯CSS3时尚价格表设计效果

纯CSS3时尚价格表设计效果:简要教程这是一款使用纯CSS3制作的时尚价格表。该价格表通过Bootstrap来进行布局,采用扁平风格,鼠标划过时还带有平滑过渡的颜色变化效果。 使用方法 HTML结构该价格表的基本HTML结构如下:<div class="container"> &
推荐度:
导读纯CSS3时尚价格表设计效果:简要教程这是一款使用纯CSS3制作的时尚价格表。该价格表通过Bootstrap来进行布局,采用扁平风格,鼠标划过时还带有平滑过渡的颜色变化效果。 使用方法 HTML结构该价格表的基本HTML结构如下:<div class="container"> &

简要教程

这是一款使用纯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; }
 }

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文档

纯CSS3时尚价格表设计效果

纯CSS3时尚价格表设计效果:简要教程这是一款使用纯CSS3制作的时尚价格表。该价格表通过Bootstrap来进行布局,采用扁平风格,鼠标划过时还带有平滑过渡的颜色变化效果。 使用方法 HTML结构该价格表的基本HTML结构如下:<div class="container"> &
推荐度:
标签: 价格表 css css3
  • 热门焦点

最新推荐

热门图文

猜你喜欢

热门推荐

专题
Top

抖音扫码关注

手机端二维码

每天分享百科知识!