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    {  
                background: -webkit-linear-gradient(13deg, #7409d7 0%, #8118e3 75%);
                background: -moz-linear-gradient(13deg, #7409d7 0%, #8118e3 75%); 
        } 
        .show-front .top.top-two { 
                background:-webkit-linear-gradient(33deg, #d88d06 0%, #dc8d02 75%); 
                background:-moz-linear-gradient(33deg, #d88d06 0%, #dc8d02 75%); 
        }
        .show-front .top.top-three { 
                background: -webkit-linear-gradient(54deg, #c51635 0%, #e62748 75%);  
                background: -moz-linear-gradient(54deg, #c51635 0%, #e62748 75%);  
        }  
        .show-front .top {
            -webkit-transform: rotateX( 75deg ) translateZ( 88px );
            -moz-transform: rotateX( 75deg ) translateZ( 88px );
            -o-transform: rotateX( 75deg ) translateZ( 88px );
                -ms-transform: rotateX( 75deg ) translateZ( 88px );
            transform: rotateX( 75deg ) translateZ( 88px );
        } 
        .show-front.show-front {
                -webkit-transform: translateZ( -100px );
                -moz-transform: translateZ( -100px );
                -o-transform: translateZ( -100px );
                -ms-transform: translateZ( -100px );
                transform: translateZ( -100px );
        }
        
        .agileits-shadow {
            vertical-align: middle;
            -webkit-transform: translateZ(0);
                -moz-transform: translateZ(0); 
                -o-transform: translateZ(0); 
                -ms-transform: translateZ(0); 
            transform: translateZ(0); 
            -webkit-backface-visibility: hidden; 
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s; 
            transition-duration: 0.3s;
            -webkit-transition-property: transform;
                -moz-transition-property: transform; 
            transition-property: transform;
        }
        .agileits-shadow:hover, .agileits-shadow:focus, .agileits-shadow:active {
            -webkit-transform: translateY(-5px);
                -moz-transform: translateY(-5px);
                -o-transform: translateY(-5px);
                -ms-transform: translateY(-5px);
            transform: translateY(-5px);
        }
        .agileits-shadow:before { 
            position: absolute;
            z-index: -1;
            content: '';
            top: 94%;
            left: 5%;
            height: 44px;
            width: 90%;
            opacity: 1;
            background: -webkit-radial-gradient(center, ellipse, #191918 0%, rgba(0, 0, 0, 0) 81%);
            background: radial-gradient(ellipse at center, #191918 0%, rgba(0, 0, 0, 0) 81%);
            -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s; 
            transition-duration: 0.3s;
            -webkit-transition-property: transform, opacity;
                -moz-transition-property: transform, opacity;
                -o-transition-property: transform, opacity;
            transition-property: transform, opacity;
        }
        .agileits-shadow:hover:before, .agileits-shadow:focus:before, .agileits-shadow:active:before {
            opacity: 1;
            -webkit-transform: translateY(5px);
                -moz-transform: translateY(5px);
                -o-transform: translateY(5px);
                -ms-transform: translateY(5px);
            transform: translateY(5px);
        } 
        /*-- //cube shadow --*/   
        #small-dialog {
            background: #000;
            padding: 1em;
            max-width: 629px;
            margin: 40px auto;
            position: relative;
            text-align: center;
            border: 15px solid#f0eef3;
        } 
        .payment-online-form-left{
        }
        form li {
        list-style: none;
        }
        form ul {
         padding:0;
        }
        .payment-online-form-left h4 {
            font-size: 1.8em;
            color: #fff;
            padding: 0.5em 0;
            text-align: left;
            font-weight: 300;
        }
        .payment-online-form-left span{
                vertical-align: middle;
                margin-right: 10px;
        }
        .col_checkbox input[type="radio"] {
            cursor: pointer;
        }
        .payment-online-form-left form{
                padding:0 3%;
        }
        .payment-online-form-left input[type="text"]{
                padding: 1em 1em;
                color: #485460;
                width: 42%;
                margin: 0.5em 0;
                border: 1px solid;
                outline: none;
                transition: border-color 0.3s;
                -o-transition: border-color 0.3s;
                -ms-transition: border-color 0.3s;
                -moz-transition: border-color 0.3s;
                -webkit-transition: border-color 0.3s;
                float: left;
                font-size: 0.9em;
                border-color: #EEE;
                -webkit-appearance:none;
        } 
        .payment-online-form-left ul li:first-child input[type="text"]{
                margin-right: 5%;
        }
        .payment-online-form-left input[type="text"]:active, .payment-online-form-left input[type="text"]:hover {
            color: #e83454;
            border-color: #e83454;
        }
        .payment-sendbtns{
                float:right;
                margin: 1.2em 0 1em;
        }
        .payment-sendbtns input[type="reset"]{
                background:#f39c0f;
                padding: 0.7em 1em;
                border: none;
                color: #FFF;
                cursor: pointer;
                font-size: 1.2em;
                display: block;
                -webkit-transition: all 0.5s ease-in-out;
                -moz-transition: all 0.5s ease-in-out;
                -o-transition: all 0.5s ease-in-out;
    .........完整代码请登录后点击上方下载按钮下载查看