css实现20款不同风格用户属性卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现20款不同风格用户属性卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!--========================== DESIGNED WITH USE BOOTSTRAP 4.1-->
<html>
<head>
<title>Profile Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
#main-body {
background-color:rgba(228,228,228,1.00) !important;
}
a:hover {
text-decoration:none !important;
}
/*profile1*/.bg1 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-1/men1.jpg);
background-repeat:no-repeat;
background-size:cover;
height:500px;
}
/*profile2*/.bg2 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-2/bg2.jpg);
background-repeat:no-repeat;
background-size:cover;
height:500px;
}
/*profile3*/.bg3 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-3/bg3.jpg);
background-repeat:no-repeat;
background-size:cover;
height:400px;
}
/*profile4*/.bg4 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-4/bg4.jpg);
background-repeat:no-repeat;
background-size:cover;
height:500px;
}
/*profile5*/.bg5 {
background-color:#37d993;
height:600px;
}
/*profile6*/.bg6 {
background-color:#d9dfe5;
height:600px;
}
/*profile7*/.bg7 {
background-color:#72a270;
height:550px;
}
/*profile8*/.bg8 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-8/bg8.jpg);
background-repeat:no-repeat;
background-size:cover;
height:550px;
}
/*profile9*/.bg4 {
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-9/bg4.jpg);
background-repeat:no-repeat;
background-size:cover;
height:500px;
}
/*profile10*/.bg9 {
background:#b7cbd4;
height:500px;
}
/*profile11*/.bg10 {
background:#e4e9f2;
height:500px;
}
/*profile12*/.b_style2 {
height:220px;
}
/*profile13*/.bg11 {
height:500px;
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-image:linear-gradient(to bottom,#002f4b,#dc4225);
opacity:.9;
}
/*profile14*/.bg13 {
background-color:#d9dee4;
}
/*profile15*/.bg14 {
background-color:#d6d6d6;
}
/*profile16*/.bg15 {
background:rgba(210,234,234,1);
background:linear-gradient(45deg,rgba(210,234,234,1) 0%,rgba(255,255,255,1) 42%,rgba(255,255,255,1) 62%,rgba(248,239,198,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2eaea',endColorstr='#f8efc6',GradientType=1 );
}
/*profile17*/.bg16 {
background:rgba(101,161,161,1);
background:-moz-linear-gradient(-45deg,rgba(101,161,161,1) 0%,rgba(98,198,135,1) 100%);
background:-webkit-gradient(left top,right bottom,color-stop(0%,rgba(101,161,161,1)),color-stop(100%,rgba(98,198,135,1)));
background:-webkit-linear-gradient(-45deg,rgba(101,161,161,1) 0%,rgba(98,198,135,1) 100%);
background:-o-linear-gradient(-45deg,rgba(101,161,161,1) 0%,rgba(98,198,135,1) 100%);
background:-ms-linear-gradient(-45deg,rgba(101,161,161,1) 0%,rgba(98,198,135,1) 100%);
background:linear-gradient(135deg,rgba(101,161,161,1) 0%,rgba(98,198,135,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#65a1a1',endColorstr='#62c687',GradientType=1 );
}
/*profile18*/.bg17 {
background-repeat:no-repeat;
background-size:cover;
}
/*profile19*/.bg18 {
background:rgba(114,66,246,1);
background:-moz-linear-gradient(-45deg,rgba(114,66,246,1) 0%,rgba(246,42,83,1) 100%);
background:-webkit-gradient(left top,right bottom,color-stop(0%,rgba(114,66,246,1)),color-stop(100%,rgba(246,42,83,1)));
background:-webkit-linear-gradient(-45deg,rgba(114,66,246,1) 0%,rgba(246,42,83,1) 100%);
background:-o-linear-gradient(-45deg,rgba(114,66,246,1) 0%,rgba(246,42,83,1) 100%);
background:-ms-linear-gradient(-45deg,rgba(114,66,246,1) 0%,rgba(246,42,83,1) 100%);
background:linear-gradient(135deg,rgba(114,66,246,1) 0%,rgba(246,42,83,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7242f6',endColorstr='#f62a53',GradientType=1 );
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Sarabun');
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Kanit');
@import url('https://fonts.googleapis.com/css?family=Poppins');
tyle_1 {
margin:50px auto;
width:250px;
height:400px;
background-color:#FDFDFD;
position:relative;
overflow:hidden;
}
.round {
width:250px;
height:250px;
border-radius:50%;
background-color:#474545;
position:absolute;
top:-45px;
right:-45px;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-1/men1-org.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:0px 45px;
position:relative;
transition:all 0.4s ease-in-out;
}
.head1 {
top:58%;
left:13%;
position:absolute;
font-size:18px;
letter-spacing:3px;
}
.p1 {
color:#bfd2d0;
top:68%;
left:13%;
position:absolute;
font-size:14px;
}
.p2 {
color:#bfd2d0;
top:74%;
left:13%;
position:absolute;
font-size:14px;
}
.icon-menu {
position:absolute;
top:88%;
left:50%;
font-size:18px;
}
.icon-menu i {
letter-spacing:10px;
}
.icon-menu i:hover {
color:#bfd2d0;
transition:ease-in all 0.3s;
}
.sidemenu-icon {
font-size:20px;
cursor:pointer;
color:#B3C7C5;
position:absolute;
top:5px;
left:10px;
}
.sidemenu {
height:100%;
width:0;
position:absolute;
z-index:1;
top:-3px;
left:-3px;
background-color:#fff;
overflow-x:hidden;
transition:0.5s;
padding-top:60px;
}
.sidemenu a {
padding:0px 0px 8px 25px;
text-decoration:none;
font-size:14px;
color:#818181;
display:block;
transition:0.3s;
}
.sidemenu a:hover {
color:#bfd2d0;
}
.sidemenu .closebtn {
position:absolute;
top:0;
right:25px;
font-size:25px;
margin-left:50px;
}
@media screen and (max-height:450px) {
.sidemenu {
padding-top:0px;
}
.sidemenu a {
font-size:14px;
}
}.ch-item {
background-color:#B3C7C5;
position:relative;
transition:all 0.4s ease-in-out;
}
.ch-info {
position:absolute;
width:100%;
height:100%;
border-radius:50%;
opacity:0;
transition:all 0.4s ease-in-out;
transform:scale(0);
-webkit-backface-visibility:hidden;
}
.ch-info h3 {
color:#fff;
text-transform:uppercase;
position:relative;
letter-spacing:2px;
font-size:16px;
margin:0 40px;
padding:80px 0 0 0;
height:110px;
font-family:'Open Sans',Arial,sans-serif;
text-shadow:0 0 1px #fff,0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
color:#fff;
padding:50px 46px;
font-style:italic;
margin:0 30px;
font-size:12px;
border-top:1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
display:block;
color:#FFFFFF;
font-style:normal;
font-weight:700;
text-transform:uppercase;
font-size:9px;
letter-spacing:1px;
padding-top:4px;
font-family:'Open Sans',Arial,sans-serif;
}
.ch-info p a:hover {
color:#fff;
}
.round:hover {
box-shadow:inset 0 0 0 110px rgba(179,199,197,0.7),inset 0 0 0 16px rgba(255,255,255,0.8),0 1px 2px rgba(0,0,0,0.1);
}
.round:hover .ch-info {
opacity:1;
transform:scale(1);
}
/*//profile1//*//*profile2*/.main_style_2 {
margin:50px auto;
width:325px;
height:400px;
background-color:#303361;
position:relative;
overflow:hidden;
border-radius:15px;
opacity:0.8;
}
.border-round {
width:150px;
height:150px;
position:absolute;
border-radius:50%;
border:1px solid #575a9f;
margin:0 auto;
left:4%;
top:4%;
transition:ease-in all 0.8s;
}
.main_style_2:hover .border-round {
transform:scale(1.1,1.1);
transition:ease-out all 0.8s;
}
.outer-round {
width:165px;
height:165px;
position:absolute;
border-radius:50%;
border:1px solid #393d6b;
margin:0 auto;
left:24%;
top:10%;
}
.round2 {
width:130px;
height:130px;
border-radius:50%;
background-color:#474545;
position:absolute;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-2/men2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:0px 0px;
margin:0 auto;
left:7%;
top:7%;
transition:ease-in all 0.8s;
}
.white {
background-color:#fefefe;
position:absolute;
bottom:0;
width:325px;
height:110px;
}
.cir {
width:50px;
height:50px;
background-color:#4bcdff;
border:1px solid #4bcdff;
position:absolute;
bottom:21%;
right:10%;
z-index:100;
border-radius:50%;
}
.bell {
color:#9195d5;
padding-left:25px;
padding-top:30px !important;
transition:ease-in all 0.8s;
transform:scale(1,1);
}
.bell:hover {
transform:scale(1.1,1.1);
transition:ease-out all 0.8s;
color:#fff;
}
.msg {
color:#9195d5;
padding-right:25px;
padding-top:30px !important;
float:right;
transform:scale(1,1);
transition:ease-in all 0.8s;
}
.msg:hover {
transform:scale(1.1,1.1);
transition:ease-out all 0.8s;
color:#fff;
}
.head2 {
top:56%;
left:32%;
position:absolute;
font-size:18px;
letter-spacing:1px;
color:#FFFFFF;
font-family:'Open Sans',sans-serif;
}
.p3 {
color:#bfd2d0;
top:62%;
left:38%;
position:absolute;
font-size:14px;
}
.hd1 {
font-size:22px;
color:#000000;
padding-top:32px;
}
.p4 {
font-size:12px;
}
.edit {
color:#FFFFFF;
padding-top:6px;
padding-left:6px;
}
/*//profile2//*//*profile3*/.main_style_3 {
margin:50px auto;
width:500px;
height:300px;
background-color:#fff;
position:relative;
overflow:hidden;
border-radius:15px;
}
.main_style_3:hover .top {
filter:grayscale(100%);
transition:ease-out all 0.5s;
}
.main_style_3:hover .round3 {
filter:grayscale(100%);
transition:ease-out all 0.5s;
}
.main_style_3:hover .img {
filter:grayscale(100%);
transition:ease-out all 0.5s;
}
.img {
transition:ease-in all 0.5s;
}
.top {
width:500px;
height:125px;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-3/top.jpg);
background-repeat:no-repeat;
background-size:cover;
position:relative;
transition:ease-in all 0.5s;
}
.round3 {
width:120px;
height:120px;
position:absolute;
top:6%;
left:6%;
z-index:100;
border-radius:50%;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-3/men3.jpg);
background-repeat:no-repeat;
background-size:cover;
transition:ease-in all 0.5s;
}
.outer {
width:135px;
height:135px;
position:absolute;
border-radius:50%;
background-color:#FFFFFF;
margin:0 auto;
left:7%;
top:12%;
}
.hd2 {
top:-15%;
left:33%;
position:absolute;
font-size:18px;
letter-spacing:1px;
color:#000;
font-family:'Open Sans',sans-serif;
z-index:100;
}
.white2 {
background-color:#fefefe;
position:absolute;
bottom:0;
width:500px;
height:110px;
}
.p5 {
color:#bfd2d0;
top:7%;
left:40%;
position:absolute;
font-size:14px;
}
.line {
width:100px;
height:1px;
background-color:#c2d5e4;
margin-top:35px;
margin-left:46px;
}
.followers {
font-size:22px;
color:#bfcace;
padding-left:65px;
padding-top:10px;
margin-bottom:0px;
}
.followers_p {
padding-left:55px;
font-size:16px;
color:#bfcace;
}
.follow {
right:20px;
bottom:15px;
background-color:#80d7ea;
color:#FFFFFF;
position:absolute;
padding:5px 20px 5px 20px;
border:1px solid #80d7ea;
border-radius:5px;
transition:ease-in all 0.3s;
}
.follow:hover {
background-color:#3a7c9f;
border:1px solid #3a7c9f;
}
/*vertical slider*/.vert .carousel-item-next.carousel-item-left,.vert .carousel-item-prev.carousel-item-right {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.vert .carousel-item-next,.vert .active.carousel-item-right {
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100% 0);
}
.vert .carousel-item-prev,.vert .active.carousel-item-left {
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.carousel {
border:1px solid #c2d9eb;
height:125px;
width:295px;
border-radius:10px;
top:-38px !important;
}
.one {
}.carousel_h {
font-size:12px;
margin-bottom:0px;
}
.carousel_p {
font-size:10px;
color:#c0ced1;
}
/*vertical slider*//*//profile3//*//*profile4*/.main_style_4 {
margin:42px auto;
width:300px;
height:420px;
background-color:#ffffff;
position:relative;
overflow:hidden;
border-radius:10px;
}
.main_style_4:hover .hill {
filter:grayscale(100%);
transition:ease-out all 0.5s;
}
.hill {
margin:5px 5px 5px 5px;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-4/bg.jpg);
background-repeat:no-repeat;
background-size:cover;
height:200px;
filter:grayscale(0%);
transition:ease-in all 0.5s;
}
.round4 {
width:100px;
height:100px;
position:absolute;
top:37%;
left:33%;
z-index:100;
border-radius:50%;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-4/men4.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:0px -10px;
transition:ease-in all 0.5s;
}
.main_style_4:hover .round4 {
transform:scale(1.2,1.2);
transition:ease-out all 0.5s;
}
.hd3 {
padding-top:60px;
font-size:22px;
padding-left:100px;
}
.p6 {
font-size:14px;
padding-left:10px;
text-align:center;
padding-right:10px;
}
.icon-menu2 {
position:absolute;
top:88%;
left:38%;
font-size:18px;
}
.icon-menu2 i {
letter-spacing:10px;
}
.icon-menu2 i:hover {
color:#bfd2d0;
transition:ease-in all 0.3s;
}
/*//profile4//*//*profile5*/.main_style_5 {
margin:43px auto;
width:300px !important;
height:520px;
background-color:#ffffff;
}
.e_pro {
background-color:rgb(26,205,128);
border:#e5eef2 1px solid;
color:#fdfdfd;
font-size:10px;
float:right;
margin-right:20px;
margin-top:15px;
border-radius:5px;
transition:ease-out all 0.3s;
}
.e_pro:hover {
transition:ease-in all 0.3s;
background-color:#1ACD80;
color:white;
}
.round5 {
width:100px;
height:100px;
top:37%;
left:33%;
border-radius:50%;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-5/men4.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:0px -10px;
transition:ease-in all 0.5s;
}
.hd4 {
color:#62696b;
}
.det {
font-size:11px;
color:#b5babb;
}
.e-m {
color:#b5babb;
font-size:12px;
z-index:1;
transition:1s;
}
.gen {
color:#b5babb;
font-size:12px;
}
.detail {
font-size:14px;
}
.sec {
width:250px;
margin-left:40px;
}
.call {
background-color:#37d993;
color:#fff;
border:1px solid #37d993;
margin-top:5px;
padding:2px 10px 2px 10px;
transition:ease-out all 0.3s;
}
.call:hover {
transition:ease-in all 0.3s;
background-color:#1ACD80;
}
.diseas {
font-size:12px;
color:#62696b;
padding-left:20px;
padding-top:15px;
}
.pp1 {
color:#b5babb;
font-size:12px;
padding-left:20px;
}
.edit2 {
background-color:rgba(255,255,255,1.00);
border:#e5eef2 1px solid;
color:#bfc4c6;
font-size:10px;
float:right;
margin-right:20px;
margin-top:15px;
border-radius:5px;
transition:ease-out all 0.3s;
}
.edit2:hover {
transition:ease-in all 0.3s;
background-color:#1ACD80;
color:white;
}
.profile-icon {
font-size:20px;
cursor:pointer;
color:#B3C7C5;
position:absolute;
top:5px;
left:10px;
}
.profile {
height:520px;
width:0px;
position:absolute;
z-index:1;
top:43px;
left:135px;
background-color:#333b3e;
overflow-x:hidden;
transition:0.3s;
padding-top:0px;
}
.profile a:hover {
color:#bfd2d0;
}
.profile .closebtn2 {
position:absolute;
top:0;
right:25px;
font-size:25px;
margin-left:50px;
}
@media screen and (max-height:450px) {
.profile {
padding-top:0px;
}
.profile a {
font-size:14px;
}
}#profile h4 {
color:#fff;
padding-left:20px;
padding-top:15px;
padding-bottom:25px;
z-index:1;
transition:1s;
}
.border_btm {
border-bottom:#373f42 solid 2px;
z-index:1;
transition:1s;
}
.hd5 {
color:#e2e3e4;
font-size:14px;
z-index:1;
transition:1s;
}
.pmain {
color:#6a7478;
z-index:1;
}
.bgc {
background-color:#344247;
padding-top:10px;
padding-bottom:10px;
transition:ease-out all 0.3s;
}
.bgc:hover {
background-color:rgba(71,76,87,1.00);
transition:ease-in all 0.3s;
}
#timer i {
color:#6a7478;
font-size:20px;
}
.per {
color:#42b0d8;
}
.bgs {
background-color:#344247;
transition:ease-out all 0.3s;
}
.bgs:hover {
background-color:rgba(71,76,87,1.00);
transition:ease-in all 0.3s;
}
#monitor i {
color:#40d092;
font-size:14px;
}
#monitor a {
color:#e2e3e4;
font-size:11px;
margin-bottom:0px;
padding-top:5px;
padding-bottom:5px;
display:block;
}
.foot {
background-color:#2e3538;
margin-top:80px;
transition:ease-out all 0.3s;
padding-top:5px;
padding-bottom:6px;
}
.logout {
color:#e2e3e4;
font-size:14px;
}
.foot:hover a {
color:#575757;
}
.foot:hover {
background-color:#40d092;
transition:ease-in all 0.3s;
}
/*//profile5//*//*profile6*/.main_style_6 {
margin:50px auto;
width:300px;
height:500px;
background-color:#ffffff;
box-shadow:rgba(175,175,175,1.00);
}
#left h5 {
color:#000;
font-size:18px;
padding-top:30px;
}
#left p {
color:#000;
font-size:13px;
color:#bbc1d0;
font-family:'Sarabun',sans-serif;
}
#right h5 {
padding-top:15px;
float:left;
font-size:24px;
}
#right p {
color:#000;
font-size:12px;
float:left;
padding-right:55px;
color:#bbc1d0;
font-family:'Sarabun',sans-serif;
}
#right span {
color:#f79414;
font-size:18px;
float:right;
margin-right:50px;
padding-top:20px;
}
.img2 {
width:175px;
height:300px;
}
.plus {
width:40px;
height:40px;
border-radius:50%;
position:absolute;
top:36%;
left:30%;
background:#7292e1;
border:2px #fff solid;
}
.plus i {
color:#FFFFFF;
}
.profile2-icon {
font-size:20px;
cursor:pointer;
color:#B3C7C5;
position:absolute;
top:5px;
left:10px;
}
.profile2 {
height:504px;
width:0px;
position:absolute;
z-index:1000;
top:48px;
left:135px;
background-color:#ffffff;
overflow-x:hidden;
transition:0.5s;
padding-top:0px;
}
.profile2 a:hover {
color:#bfd2d0;
}
.profile2 .closebtn3 {
position:absolute;
top:0;
right:25px;
font-size:25px;
margin-left:50px;
}
@media screen and (max-height:450px) {
.profile2 {
padding-top:0px;
}
.profile2 a {
font-size:14px;
}
}#news h5 {
padding-top:20px;
z-index:1;
}
#news p {
color:#bbc1d0;
font-size:12px;
z-index:1;
font-family:'Sarabun',sans-serif;
}
#news .time {
padding-top:25px;
font-size:11px;
color:#b5babb;
}
.round6 {
width:35px;
height:35px;
border-radius:50%;
background-image:url(//repo.bfw.wiki/bfwrepo/images/card/images/profile-6/men1-org.jpg);
background-repeat:no-repeat;
background-size:cover;
margin-left:30px;
margin-top:20px;
z-index:100;
}
.border_btm2 {
border-bottom:1px #E4E4E4 solid;
}
.img7 {
text-align:center;
position:relative;
margin:0 auto;
display:inline-block;
overflow:hidden;
background-color:black;
margin-bottom:0px;
}
.img7 .name {
text-decoration:none;
text-transform:uppercase;
text-shadow:rgba(0,0,0,0.7) 1px 1px 5px;
color:white;
font-weight:lighter;
font-size:20px;
letter-spacing:.1em;
position:absolute;
display:block;
top:40%;
left:0;
text-align:center;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
z-index:2;
width:100%;
height:100%;
}
.img7 .name .title {
display:block;
text-transform:none;
font-style:italic;
font-size:80%;
color:rgba(255,255,255,0.7);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
transition-property:all;
transition-delay:0.2s;
transition-duration:0.9s;
}
.img7:hover .name {
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity:1;
transform:scale(1,1);
transition-property:all;
transition-duration:0.6s;
}
.img7:hover .title {
filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity:1;
}
.img7:hover img {
transform:scale(1,1);
background-position:top top;
filter:grayscale(0.4) blur(2px);
transition-property:all;
transition-duration:0.8s;
}
.img7:hover:hover img {
filter:progid:DXImageTransform.Mi.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0