css实现彩色价格套餐效果代码
代码语言：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;
transition: all 0.5s ease-in-out;
outline:none;
}
.payment-sendbtns input[type="reset"]:hover{
color:#FFF;
background:#e83454;
}
.payment-sendbtns input[type="submit"]{
background:#e83454;
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;
transition: all 0.5s ease-in-out;
-webkit-appearance:none;
outline:none;
}
.payment-sendbtns input[type="submit"]:hover{
color:#fff;
background:#f39c0f;
}
.payment-sendbtns li{
display:inline-block;
}
.payment-type li{
display:inline-block;
margin: 1em 1em 1em 0;
}
.visa{
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
}
.paypal{
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
}
.payment-type {
border-top: 1px solid rgba(144, 149, 170, 0.22);
margin-top: 3%;
text-align: left;
}
/* start state */
/* animate in */
/* animate out */
/* Dark overlay, start state */
/* animate in */
/* animate out */
/**
/* Magnific Popup CSS */
.mfp-hide {
display: none !important; }
/*-- //main --*/
/*-- responsive-design --*/
@media(max-width:991px){
.main-row {
width: 680px;
}
.show-front figure {
width: 218px;
height: 128px;
}
.show-front .top {
-webkit-transform: rotateX( 75deg ) translateZ( 83px );
-moz-transform: rotateX( 75deg ) translateZ( 83px );
-o-transform: rotateX( 75deg ) translateZ( 83px );
-ms-transform: rotateX( 75deg ) translateZ( 83px );
transform: rotateX( 75deg ) translateZ( 83px );
}
.pricing-grid {
width: 31.5%;
}
.pricing-grid:nth-child(2) {
margin: 0 0.8em;
}
.agileinfo-price h2, .agileinfo-price h3 {
font-size: 1.8em;
}
.price-bg p span {
font-size: 4.5em;
}
h1 {
margin: 1em 0 1.6em;
font-size: 2.7em;
}
}
@media(max-width:768px){
.main-row {
width: 600px;
}
.pricing-grid:nth-child(2) {
margin: 0 0.6em;
}
.show-front figure {
width: 194px;
height: 114px;
}
.show-front {
left: -4px;
}
.show-front .top {
-webkit-transform: rotateX( 78deg ) translateZ( 70px );
-moz-transform: rotateX( 78deg ) translateZ( 70px );
-o-transform: rotateX( 78deg ) translateZ( 70px );
-ms-transform: rotateX( 78deg ) translateZ( 70px );
transform: rotateX( 78deg ) translateZ( 70px );
}
h1 {
margin: 0.5em 0 1.2em;
font-size: 2.5em;
}
ul.count li {
padding: 0.8em 0;
}
}
@media(max-width:736px){
.pricing-grid:nth-child(2) {
margin: 0 0.4em;
}
.agileinfo-price h2, .agileinfo-price h3 {
font-size: 1.6em;
}
.price-bg p span {
font-size: 4.2em;
}
p.price-label-1,p.price-label-2,p.price-label-3 {
font-size: .9em;
}
.main-row {
width: 592px;
}
.show-front figure {
width: 192px;
}
}
@media(max-width:667px){
.main-row {
width: 350px;
}
.pricing-grid {
width: 75%;
float: none;
margin: 0 auto;
}
.show-front figure {
width: 270px;
}
.pricing-grid:nth-child(2) {
margin: 3em auto;
}
h1 {
font-size: 2.1em;
}
#small-dialog {
max-width: 400px;
margin: 25px auto;
border-width: 10px;
}
.payment-online-form-left input[type="text"] {
padding: 0.8em;
width: 93%;
}
.payment-sendbtns input[type="reset"],.payment-sendbtns input[type="submit"]{
font-size: 1em;
}
.payment-type {
margin-top: 5%;
}
.payment-online-form-left h4 {
font-size: 1.6em;
}
}
@media(max-width:480px){
.agileinfo-price h2, .agileinfo-price h3 {
font-size: 1.6em;
}
.agileinfo-price {
padding: 0.8em 0;
}
.agileinfo-price h5 {
padding: 5px 0;
}
.price-bg {
padding: 1.2em;
}
.price-bg p span {
font-size: 4em;
}
.buy a {
font-size: 0.9em;
}
h1 {
font-size: 1.9em;
}
#small-dialog {
max-width: 320px;
margin: 20.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0