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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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