js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 其它代码

纯CSS3实现漂亮的价格表样式特效

发布时间:2015-09-08 22:30:28    您是第0位浏览者

本js特效代码兼容:ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

纯CSS3实现漂亮的价格表样式特效
html,html a{text-shadow:1px 1px 1px rgba(0,0,0,.004);-webkit-font-smoothing:antialiased}
#plans,#plans ul,#plans ul li{margin:0;padding:0;list-style:none}
#pricePlans:after{clear:both;display:table;content:''}
#pricePlans{zoom:1}
#pricePlans{margin:2em auto;max-width:69em}
#pricePlans #plans .plan{float:left;margin:0 1.33% 20px 0;width:23%;border:1px solid #d3d3d3;border-radius:5px;background:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.1);text-align:center;-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;transition:all .25s;-ms-transition:all .25s}
#pricePlans #plans .plan:hover{-webkit-transform:scale(1.04);-moz-transform:scale(1.04);-o-transform:scale(1.04);transform:scale(1.04);-ms-transform:scale(1.04)}
.planContainer .title h2{margin:0;padding:.6em 0;color:#3e4f6a;font-weight:300;font-size:2.125em}
.planContainer .title h2.bestPlanTitle{border-radius:5px 5px 0 0;background:#3e4f6a;background:-webkit-linear-gradient(top,#475975,#364761);background:-moz-linear-gradient(top,#475975,#364761);background:-o-linear-gradient(top,#475975,#364761);background:-ms-linear-gradient(top,#475975,#364761);background:linear-gradient(top,#475975,#364761);color:#fff}
.planContainer .price p{margin:0 0 1em;height:2.6em;background:#3e4f6a;background:-webkit-linear-gradient(top,#475975,#364761);background:-moz-linear-gradient(top,#475975,#364761);background:-o-linear-gradient(top,#475975,#364761);background:-ms-linear-gradient(top,#475975,#364761);background:linear-gradient(top,#475975,#364761);color:#fff;font-weight:700;font-size:1.2em;line-height:2.6em}
.planContainer .price p.bestPlanPrice{background:#f7814d}
.planContainer .price p span{color:#8394ae}
.planContainer .options{margin-top:10em}
.planContainer .options li{color:#364762;font-weight:700;line-height:2.5}
.planContainer .options li span{color:#979797;font-weight:400}
.planContainer .button a{display:inline-block;margin:1.5em 0 1.8em;width:80%;height:2.8em;border:2px solid #3e4f6a;border-radius:4px;color:#3e4f6a;text-decoration:none;text-transform:uppercase;letter-spacing:3px;font-weight:700;line-height:2.8em;-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;transition:all .25s;-ms-transition:all .25s}
.planContainer .button a.bestPlanButton{border:2px solid #f7814d;background:#f7814d;color:#fff}
#pricePlans #plans>li:last-child{margin-right:0}
.planContainer .button a:hover{background:#3e4f6a;color:#fff}
.planContainer .button a.bestPlanButton:hover{border:2px solid #ff9c70;background:#ff9c70}



价格表

纯CSS3实现漂亮的价格表样式特效

友荐云推荐
大家说 此评论不代表本站观点