css实现彩色价格套餐效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现彩色价格套餐效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        html,body,div,span,h1,h2,h3,h4,h5,p,a,i,form,figure{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
        figure {display: block;}
        ul{list-style:none;margin:0px;padding:0px;}
        /*--start editing from here--*/
        a{text-decoration:none;}/* text align right *//* text align left *//* text align center *//* float right *//* float left */
        .clear{clear:both;}/* clear float *//* Position Relative *//* Position Absolute *//* vertical align baseline *//* vertical align top *//* vertical menu *//* horizontal menu */
        /*--end reset--*/
        body {
            font-family: 'Open Sans', sans-serif;
            background: #33a99d;
        	-webkit-background-size:cover;
        	-moz-background-size:cover;
        	-o-background-size:cover;
        	-ms-background-size:cover;
        	background-size:cover;
        	background-attachment: fixed;
        }
        h1 {
        	text-align: center;
        	margin: 1em 0 1.8em;
        	font-size: 3em;
        	color: #000;
        	font-weight: 300;
        }
        /*-- main --*/
        .main-row {
            width: 835px;
            margin: 0 auto !important;
        } 
        .pricing-grid {
            width: 32%;
            float: left; 
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        	-ms-transition: 0.5s all;
        	transition: 0.5s all;
        }
        .pricing-grid:nth-child(2) {
            margin: 0 1em;
        }
        /*Pricing table and price blocks*/ 
        /*----*/  
        .agileinfo-price  h2,.agileinfo-price  h3{
        	font-size: 2em;
        	color: #fff;
        	font-weight: 300;
        }
        .agileinfo-price {
        	background: #8c25ec;
        	padding: 1em 0; 
        	text-align: center;
        }
        .agileinfo-price.two{
        	background: #f39c0f; 
        }
        .agileinfo-price.three {
        	background: #e83454; 
        }
        .agileinfo-price  h5 {
        	padding: 11px 0;
        	font-style: italic;
        	font-size: 13px;
        	color: #F0EBEB;
        }
        ul.count,ul.count,ul.count{
        	font-size: 15px;
        	display: block;
        	text-decoration: none;
        	font-weight: 400;
        	padding: 10px 20px;
        }
        .price-bg {
            background: #fff; 
            padding: 1.5em;
        }
        p.price-label-1 {
        	color: #8c25ec;
        	text-align: center;
        }
        p.price-label-2 {
        	color: #f39c0f;
        	text-align: center;
        }
        p.price-label-3 {
        	color: #e83454;
        	text-align: center;
        }
        .price-bg p span {
            font-weight: bold;
            font-size: 5em;
            line-height: 0.8em;
            margin-right: 5px;
        }
        .price-bg p i {
        	vertical-align: super;
        }
        .price-bg ul {
        	padding: 0;
        	margin-top: 1em;
        }
        .price-bg ul li{
        	list-style: none;
        } 
        .buy {
            padding: 1em 0 0;
            text-align: center;
        }
        .buy a {
            background: #8c25ec; 
            font-size: 1em;
            color: #fff; 
            padding: .5em 1.5em;
            display: inline-block;
        	-webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        	-ms-transition: 0.5s all;
        	transition: 0.5s all;
        }
        .buy a:hover {  
            border: 1px solid #8c25ec;
            background: none;
            color: #7409d7; 
        }
        .buy.buy-two a {
            background: #f39c0f;
        }
        .buy.buy-two a:hover {  
            border: 1px solid #f39c0f;
            background: none;
            color: #f39c0f;
            font-weight: 500;
        }
        .buy.buy-three a {
            background: #e83454;  
        }
        .buy.buy-three a:hover {  
            border: 1px solid #e83454;
            background: none;
            color: #e83454;
            font-weight: 500;
        } 
        ul.count li {
            border-bottom: 1px dashed #dadada;
            padding: 1em 0;
            text-align: center;
            color: #888;
            font-size: 1em;
            font-weight: 400;
        }
        a.popup-with-zoom-anim {
          outline: none; 
        }
        /*-- start-pricing-tabels --*/
        /*-- cube shadow --*/ 
        .w3ls-main {
            width: 270px; 
            position: relative;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -o-perspective: 1000px;
        	-ms-perspective: 1000px;
            perspective: 1000px;
        } 
        .show-front { 
        	position: absolute;
        	-webkit-transform-style: preserve-3d;
        	-moz-transform-style: preserve-3d;
        	-o-transform-style: preserve-3d;
        	transform-style: preserve-3d;
        	-webkit-transition: -webkit-transform 1s;
        	-moz-transition: -moz-transform 1s;
        	-o-transition: -o-transform 1s;
        	transition: transform 1s;
        	left:-2px;
        }
        
        .show-front figure {
            display: block;
            position: absolute;
            width: 271px;
            height: 135px;
        } 
        .show-front .top    {  
        	backgroun.........完整代码请登录后点击上方下载按钮下载查看