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