bootstrap实现4款价格套餐卡片效果代码
代码语言：html
所属分类：布局界面
代码描述：bootstrap实现4款价格套餐卡片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.1.2.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">
<style>
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;
500;
700&display=swap);
body,ul {
margin:0
}
.style-1 .btn:after,.style-1 .card {
-webkit-transition:.3s;
-o-transition:.3s
}
.style-1 .card-header .icon,.style-1 li {
display:-webkit-box;
display:-ms-flexbox;
-webkit-box-align:center
}
* {
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-family:'Open Sans',sans-serif
}
body {
padding:0 0 60px;
background-color:#efefef;
font-size:16px
}
:root {
--gradient-1:linear-gradient(315deg,#feac5e 0,#c779d0 74%)
}
.style-4 .card-title,h1,h2 {
font-weight:700
}
h1 {
font-size:60px
}
h2 {
font-size:40px
}
ul {
list-style:none;
padding:0
}
.btn:hover,.style-4 .card:hover {
color:#fff
}
.card-header {
background-color:transparent;
border:0
}
.bordered {
border-radius:20px
}
.style-1 .card {
padding:50px 40px;
border:0;
font-size:16px;
font-weight:500;
transition:.3s;
color:#677284
}
.style-1 .card-header .icon {
display:flex;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:88px;
height:88px;
border-radius:20px;
font-size:30px;
background-color:#e3e5fa;
color:#3851e1
}
.style-1 li {
display:flex;
-ms-flex-align:center;
align-items:center
}
.style-1 .card-body .icon,.style-2 .icon {
display:-webkit-inline-box;
display:-ms-inline-flexbox;
-webkit-box-align:center
}
.style-1 .card-header {
color:#000249
}
.style-1 h3 {
font-size:30px;
font-weight:700
}
.style-1 .card-header p {
font-size:18px
}
.style-1 .btn {
border:1px solid #3851e1;
padding:20px 0;
border-radius:20px;
position:relative
}
.style-1 .card-price {
color:#000249;
text-align:center;
font-size:48px;
font-weight:700
}
.style-1 .card-body .icon {
display:inline-flex;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
font-size:14px;
width:24px;
height:24px;
border-radius:50%;
color:#3851e1;
background-color:#e3e5fa
}
.style-1 .btn:hover {
background-color:#3851e1
}
.style-1 hr {
background-color:rgba(0,0,0,.2)
}
.style-1 .card:hover,.style-2 .card:hover,.style-3 .card:hover {
-webkit-box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%);
box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%)
}
.style-1 .btn:after {
width:0;
z-index:-1;
top:0;
position:absolute;
content:"";
height:100%;
left:0;
direction:rtl;
-webkit-box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;
transition:.3s
}
.style-2 .btn,.style-2 .card {
-webkit-transition:.3s;
-o-transition:.3s
}
.style-1 .btn:hover:after {
left:auto;
right:0;
width:100%
}
.style-2 .card {
color:#677284;
padding:25px 25px 40px;
transition:.3s
}
.style-2 .price {
background-color:#f0f7fd;
padding:10px 20px;
border-radius:10px
}
.style-2 .price .count {
font-size:40px;
font-weight:700
}
.style-2 .btn {
position:relative;
padding:15px 0;
background-color:#3851e1;
color:#fff;
border-radius:20px;
transition:.3s
}
.style-3 .card,.style-4 .card {
-webkit-transition:.3s;
-o-transition:.3s
}
.style-2 .btn:hover {
background-color:#3146cb
}
.style-2 .icon {
display:inline-flex;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
font-size:12px;
width:20px;
height:20px;
border-radius:50%;
border:1px solid #677284
}
.style-3 .card {
padding:25px;
transition:.3s
}
.style-3 .price {
color:#000958;
font-size:64px;
font-weight:700
}
.style-3 .btn,.style-3 .icon {
color:#3851e1
}
.style-3 .btn {
padding:15px 0;
border:1px solid #3851e1;
border-radius:40px;
font-size:18px;
font-weight:500
}
.style-3 .btn:hover {
background-color:#3851e1;
color:#fff
}
.style-3 .btn span {
-webkit-transition:none;
-o-transition:none;
transition:none
}
.style-3 .rate {
margin-bottom:0;
color:#3851e1
}
.style-4 li:not(:last-child) {
margin-bottom:16px
}
.style-4 .card {
padding:50px 0;
border:0;
font-size:14px;
font-weight:500;
color:#767676;
transition:.3s
}
.style-4 .btn,.style-4 .card-price {
color:#fff;
-webkit-transition:.3s;
-o-transition:.3s
}
.style-4 .card-header {
position:relative;
z-index:2
}
.style-4 .card-body {
position:relative;
z-index:2;
padding:0 50px
}
.style-4 .card-price {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:180px;
height:180px;
border-radius:50%;
font-weight:500;
margin:0 auto;
background-color:#1fd1f9;
background-image:var(--gradient-1);
transition:.3s
}
.style-4 .card-foot {
padding:0 40px
}
.style-4 .big {
font-size:52px
}
.style-4 .btn {
width:100%;
position:relative;
padding:20px 0;
line-height:100%;
-webkit-box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%);
box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%);
border:0;
outline:0;
z-index:2;
overflow:hidden;
transition:.3s
}
.style-4 .btn:after,.style-4 .card:after {
position:absolute;
-webkit-transition:.3s;
-o-transition:.3s;
background-image:var(--gradient-1)
}
.style-4 .btn span {
position:relative;
z-index:3
}
.style-4 .btn:after {
content:" ";
left:0;
top:0;
width:100%;
height:100%;
transition:.3s;
z-index:2;
pointer-events:none
}
.style-4 .btn:hover {
-webkit-box-shadow:4px 4px 6px 0 rgb(255 255 255 / 50%),-4px -4px 6px 0 rgb(116 125 136 / 20%),inset -4px -4px 6px 0 rgb(255 255 255 / 50%),inset 4px 4px 6px 0 rgb(116 125 136 / 30%);
box-shadow:4px 4px 6px 0 rgb(255 255 255 / 50%),-4px -4px 6px 0 rgb(116 125 136 / 20%),inset -4px -4px 6px 0 rgb(255 255 255 / 50%),inset 4px 4px 6px 0 rgb(116 125 136 / 30%)
}
.style-4 .btn:hover:after {
-webkit-transform:scale(2) rotate(180deg);
-ms-transform:scale(2) rotate(180deg);
transform:scale(2) rotate(180deg);
-webkit-box-shadow:4px 4px 6px 0 rgb(255 255 255 / 50%),-4px -4px 6px 0 rgb(116 125 136 / 20%),inset -4px -4px 6px 0 rgb(255 255 255 / 50%),inset 4px 4px 6px 0 rgb(116 125 136 / 30%);
box-shadow:4px 4px 6px 0 rgb(255 255 255 / 50%),-4px -4px 6px 0 rgb(116 125 136 / 20%),inset -4px -4px 6px 0 rgb(255 255 255 / 50%),inset 4px 4px 6px 0 rgb(116 125 136 / 30%)
}
.style-4 .icon {
display:inline-block;
width:20px
}
.style-4 .card:after {
content:"";
transition:.3s
}
.style-4 .card:hover .card-price {
background:#fff;
-webkit-box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%);
box-shadow:inset 2px 2px 2px 0 rgb(255 255 255 / 50%),7px 7px 20px 0 rgb(0 0 0 / 10%),4px 4px 5px 0 rgb(0 0 0 / 10%);
color:#767676
}
.style-4 .card:hover .btn:after {
background:#fff;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.style-4 .card:hover .btn span {
color:#767676;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.style-4 .card:hover::after {
width:100%;
height:100%;
border-radius:0;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.style-4 .hover-1:after {
left:0;
top:0;
width:0;
height:0;
border-radius:0 50% 50%
}
.style-4 .hover-2:after,.style-4 .hover-3:after,.style-4 .hover-4:after {
width:0;
background-image:var(--gradient-1)
}
.style-4 .hover-1 .btn:after,.style-4 .hover-1 .card-price,.style-4 .hover-2 .btn:after,.style-4 .hover-2 .card-price,.style-4 .hover-3 .btn:after,.style-4 .hover-3 .card-price,.style-4 .hover-4 .btn:after,.style-4 .hover-4 .card-price,.style-4 .hover-5 .btn:after,.style-4 .hover-5 .card-price,.style-4 .hover-6 .btn:after,.style-4 .hover-6 .card-price {
background-image:var(--gradient-1)
}
.style-4 .hover-2:after {
left:0;
bottom:0;
height:0;
border-radius:50% 50% 50% 0
}
.style-4 .hover-3:after {
right:0;
top:0;
height:0;
border-radius:50% 0 50% 50%
}
.style-4 .hover-4:after {
right:0;
bottom:0;
height:0;
border-radius:50% 50% 0
}
.style-4 .hover-5:after {
left:0;
right:0;
top:0;
width:100%;
height:0;
background-image:var(--gradient-1)
}
.style-4 .hover-6:after {
right:0;
left:0;
bottom:0;
width:100%;
height:0
}
@media only screen and (max-width:1400px) {
.style-1 .card {
padding:40px 20px
}
.style-2 .card {
padding:15px 15px 30px
}
.style-2 .price .count {
font-size:32px
}
.style-3 .card {
padding:25px 20px
}
.style-3 li {
font-size:14px
}
}@media only screen and (max-width:1196px) {
.style-1 h3,.style-2 .card-title {
font-size:24px
}
.style-1 li,.style-2 .desc,.style-2 li {
font-size:14px
}
.style-1 .card-price {
font-size:36px
}
.style-2 .card {
padding:15px 15px 30px
}
.style-2 .price .count {
font-size:28px
}
.style-4 .card-body {
padding:0 30px
}
.style-4 .card-foot {
padding:0 25px
}
}
</style>
</head>
<body>
<div class="container">
<!-- Style 1 -->
<div class="row mb-4 mt-5">
<div class="col-12">
<h2>Style 1</h2>
</div>
</div>
<div class="row style-1">
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-5">
<div class="d-flex">
<div class="icon"><i class="fa-solid fa-user"></i></div>
<div class="text-start ms-4 mt-2">
<h3 class="card-title">Private</h3>
<p>2 License</p>
</div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Carefully crafted com</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Amazing page examples</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>2 License code</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>5 Social Pages</span></li>
</ul>
</div>
<hr class="mb-4">
<div class="card-foot">
<div class="card-price">$59</div><a href="#" class="btn w-100 mt-4"><span>Purchase</span></a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-5">
<div class="d-flex">
<div class="icon"><i class="fa-solid fa-user-group"></i></div>
<div class="text-start ms-4 mt-2">
<h3 class="card-title">Business</h3>
<p>5 License</p>
</div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Carefully crafted com</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Amazing page examples</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>2 License code</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>5 Social Pages</span></li>
</ul>
</div>
<hr class="mb-4">
<div class="card-foot">
<div class="card-price">$129</div><a href="#" class="btn w-100 mt-4"><span>Purchase</span></a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-5">
<div class="d-flex">
<div class="icon"><i class="fa-solid fa-users"></i></div>
<div class="text-start ms-4 mt-2">
<h3 class="card-title">Corporate</h3>
<p>20 License</p>
</div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Carefully crafted com</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>Amazing page examples</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>2 License code</span></li>
<li class="mb-3"><span class="me-4 icon"><i class="fa-solid fa-check"></i></span><span>5 Social Pages</span></li>
</ul>
</div>
<hr class="mb-4">
<div class="card-foot">
<div class="card-price">$189</div><a href="#" class="btn w-100 mt-4"><span>Purchase</span></a></div>
</div>
</div>
</div>
<!-- Style 2 -->
<div class="row mb-5 mt-5">
<div class="col-12">
<h2>Style 2</h2>
</div>
</div>
<div class="row style-2">
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-4">
<div class="d-flex justify-content-between align-items-center">
<div class="text-start mt-2">
<h3 class="card-title">Team</h3>
<p>Most popular</p>
</div>
<div class="price d-flex flex-column text-center"><span class="count">$159</span><span class="desc">per month</span></div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>1 user per account</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Registration form</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Unlimited events</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Email announcements</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Sales using mobile app</span></li>
</ul>
</div>
<div class="card-foot"><a href="#" class="btn w-100 mt-4"><span>Get started</span></a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-4">
<div class="d-flex justify-content-between align-items-center">
<div class="text-start mt-2">
<h3 class="card-title">Agency</h3>
<p>Recommended</p>
</div>
<div class="price d-flex flex-column text-center"><span class="count">$259</span><span class="desc">per month</span></div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Unlimited paid ticket</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Google analytics integration</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Customizable registration</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>500 Email invitations event</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Event reminders</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Registration form</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Payment with mobile app</span></li>
</ul>
</div>
<div class="card-foot"><a href="#" class="btn w-100 mt-4"><span>Get started</span></a></div>
</div>
</div>
<div class="col-lg-4 col-md-6 g-3">
<div class="card bordered">
<div class="card-header mb-4">
<div class="d-flex justify-content-between align-items-center">
<div class="text-start mt-2">
<h3 class="card-title">Enterprise</h3>
<p>Best value</p>
</div>
<div class="price d-flex flex-column text-center"><span class="count">$359</span><span class="desc">per month</span></div>
</div>
</div>
<div class="card-body">
<ul>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Unlimited paid ticket</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Google analytics integration</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Customizable registration</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>500 Email invitations event</span></li>
<li class="mb-3"><span class="me-3 icon"><i class="fa-solid fa-check"></i></span><span>Event reminders</span></li>
<li class="mb-3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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