bootstrap实现4款价格套餐卡片效果代码-html代码-BFW代码库

代码语言：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%)
 .........完整代码请登录后点击上方下载按钮下载查看