设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS实现“玩家/用户卡”
返回列表 发新帖
查看: 139|回复: 0

HTML+CSS实现“玩家/用户卡”

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 17:02:37 | 显示全部楼层 |阅读模式
这款卡片 UI 设计灵感来自双面收藏卡，悬停时会显示更多信息。卡片设计简洁明了，色彩丰富，非常适合用来展示数据。

效果
111.gif
HTML
  1. <div class="center">

  3.   <div class="card">
  4.     <div class="additional">
  5.       <div class="user-card">
  6.         <div class="level center">
  7.           Level 13
  8.         </div>
  9.         <div class="points center">
  10.           5,312 Points
  11.         </div>
  12.         <svg width="110" height="110" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" class="center">
  13.           <title id="title">Teacher</title>
  14.           <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar drawn by Alvaro Montoro.</desc>
  15.           <style>
  16.             .skin { fill: #eab38f; }
  17.             .eyes { fill: #1f1f1f; }
  18.             .hair { fill: #2f1b0d; }
  19.             .line { fill: none; stroke: #2f1b0d; stroke-width:2px; }
  20.           </style>
  21.           <defs>
  22.             <clipPath id="scene">
  23.               <circle cx="125" cy="125" r="115"/>
  24.             </clipPath>
  25.             <clipPath id="lips">
  26.               <path d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
  27.             </clipPath>
  28.           </defs>
  29.           <circle cx="125" cy="125" r="120" fill="rgba(0,0,0,0.15)" />
  30.           <g stroke="none" stroke-width="0" clip-path="url(#scene)">
  31.             <rect x="0" y="0" width="250" height="250" fill="#b0d2e5" />
  32.             <g id="head">
  33.               <path fill="none" stroke="#111111" stroke-width="2" d="M 68,103 83,103.5" />
  34.               <path class="hair" d="M 67,90 67,169 78,164 89,169 100,164 112,169 125,164 138,169 150,164 161,169 172,164 183,169 183,90 Z" />
  35.               <circle cx="125" cy="100" r="55" class="skin" />
  36.               <ellipse cx="102" cy="107" rx="5" ry="5" class="eyes" id="eye-left" />
  37.               <ellipse cx="148" cy="107" rx="5" ry="5" class="eyes" id="eye-right" />
  38.               <rect x="119" y="140" width="12" height="40" class="skin" />
  39.               <path class="line eyebrow" d="M 90,98 C 93,90 103,89 110,94" id="eyebrow-left" />
  40.               <path class="line eyebrow" d="M 160,98 C 157,90 147,89 140,94" id="eyebrow-right"/>
  41.               <path stroke="#111111" stroke-width="4" d="M 68,103 83,102.5" />
  42.               <path stroke="#111111" stroke-width="4" d="M 182,103 167,102.5" />
  43.               <path stroke="#050505" stroke-width="3" fill="none" d="M 119,102 C 123,99 127,99 131,102" />
  44.               <path fill="#050505" d="M 92,97 C 85,97 79,98 80,101 81,104 84,104 85,102" />
  45.               <path fill="#050505" d="M 158,97 C 165,97 171,98 170,101 169,104 166,104 165,102" />
  46.               <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 119,102 C 118,111 115,119 98,117 85,115 84,108 84,104 84,97 94,96 105,97 112,98 117,98 119,102 Z" />
  47.               <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 131,102 C 132,111 135,119 152,117 165,115 166,108 166,104 166,97 156,96 145,97 138,98 133,98 131,102 Z" />
  48.               <path class="hair" d="M 60,109 C 59,39 118,40 129,40 139,40 187,43 189,99 135,98 115,67 115,67 115,67 108,90 80,109 86,101 91,92 92,87 85,99 65,108 60,109" />
  49.               <path id="mouth" fill="#d73e3e" d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
  50.               <path id="smile" fill="white" d="M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z" clip-path="url(#lips)" />
  51.             </g>
  52.             <g id="shirt">
  53.               <path fill="#8665c2" d="M 132,170 C 146,170 154,200 154,200 154,200 158,250 158,250 158,250 92,250 92,250 92,250 96,200 96,200 96,200 104,170 118,170 118,170 125,172 125,172 125,172 132,170 132,170 Z"/>
  54.               <path id="arm-left" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 118,178 C 94,179 66,220 65,254" />
  55.               <path id="arm-right" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 132,178 C 156,179 184,220 185,254" />
  56.               <path fill="white" d="M 117,166 C 117,166 125,172 125,172 125,182 115,182 109,170 Z" />
  57.               <path fill="white" d="M 133,166 C 133,166 125,172 125,172 125,182 135,182 141,170 Z" />
  58.               <circle cx="125" cy="188" r="4" fill="#5a487b" />
  59.               <circle cx="125" cy="202" r="4" fill="#5a487b" />
  60.               <circle cx="125" cy="216" r="4" fill="#5a487b" />
  61.               <circle cx="125" cy="230" r="4" fill="#5a487b" />
  62.               <circle cx="125" cy="244" r="4" fill="#5a487b" />
  63.               <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-left" d="M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278" />
  64.               <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-right" d="M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"/>
  65.             </g>
  66.           </g>
  67.         </svg>
  68.       </div>
  69.       <div class="more-info">
  70.         <h1>Jane Doe</h1>
  71.         <div class="coords">
  72.           <span>Group Name</span>
  73.           <span>Joined January 2019</span>
  74.         </div>
  75.         <div class="coords">
  76.           <span>Position/Role</span>
  77.           <span>City, Country</span>
  78.         </div>
  79.         <div class="stats">
  80.           <div>
  81.             <div class="title">Awards</div>
  82.             <i class="fa fa-trophy"></i>
  83.             <div class="value">2</div>
  84.           </div>
  85.           <div>
  86.             <div class="title">Matches</div>
  87.             <i class="fa fa-gamepad"></i>
  88.             <div class="value">27</div>
  89.           </div>
  90.           <div>
  91.             <div class="title">Pals</div>
  92.             <i class="fa fa-group"></i>
  93.             <div class="value">123</div>
  94.           </div>
  95.           <div>
  96.             <div class="title">Coffee</div>
  97.             <i class="fa fa-coffee"></i>
  98.             <div class="value infinity">∞</div>
  99.           </div>
  100.         </div>
  101.       </div>
  102.     </div>
  103.     <div class="general">
  104.       <h1>Jane Doe</h1>
  105.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a volutpat mauris, at molestie lacus. Nam vestibulum sodales odio ut pulvinar.</p>
  106.       <span class="more">Mouse over the card for more info</span>
  107.     </div>
  108.   </div>

  110.   <div class="card green">
  111.     <div class="additional">
  112.       <div class="user-card">
  113.         <div class="level center">
  114.           Level 13
  115.         </div>
  116.         <div class="points center">
  117.           5,312 Points
  118.         </div>
  119.         <svg width="110" height="110" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc" class="center">
  120.           <title id="title">Teacher</title>
  121.           <desc id="desc">Cartoon of a Caucasian woman smiling, and wearing black glasses and a purple shirt with white collar drawn by Alvaro Montoro.</desc>
  122.           <style>
  123.             .skin { fill: #eab38f; }
  124.             .eyes { fill: #1f1f1f; }
  125.             .hair { fill: #2f1b0d; }
  126.             .line { fill: none; stroke: #2f1b0d; stroke-width:2px; }
  127.           </style>
  128.           <defs>
  129.             <clipPath id="scene">
  130.               <circle cx="125" cy="125" r="115"/>
  131.             </clipPath>
  132.             <clipPath id="lips">
  133.               <path d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
  134.             </clipPath>
  135.           </defs>
  136.           <circle cx="125" cy="125" r="120" fill="rgba(0,0,0,0.15)" />
  137.           <g stroke="none" stroke-width="0" clip-path="url(#scene)">
  138.             <rect x="0" y="0" width="250" height="250" fill="#b0d2e5" />
  139.             <g id="head">
  140.               <path fill="none" stroke="#111111" stroke-width="2" d="M 68,103 83,103.5" />
  141.               <path class="hair" d="M 67,90 67,169 78,164 89,169 100,164 112,169 125,164 138,169 150,164 161,169 172,164 183,169 183,90 Z" />
  142.               <circle cx="125" cy="100" r="55" class="skin" />
  143.               <ellipse cx="102" cy="107" rx="5" ry="5" class="eyes" id="eye-left" />
  144.               <ellipse cx="148" cy="107" rx="5" ry="5" class="eyes" id="eye-right" />
  145.               <rect x="119" y="140" width="12" height="40" class="skin" />
  146.               <path class="line eyebrow" d="M 90,98 C 93,90 103,89 110,94" id="eyebrow-left" />
  147.               <path class="line eyebrow" d="M 160,98 C 157,90 147,89 140,94" id="eyebrow-right"/>
  148.               <path stroke="#111111" stroke-width="4" d="M 68,103 83,102.5" />
  149.               <path stroke="#111111" stroke-width="4" d="M 182,103 167,102.5" />
  150.               <path stroke="#050505" stroke-width="3" fill="none" d="M 119,102 C 123,99 127,99 131,102" />
  151.               <path fill="#050505" d="M 92,97 C 85,97 79,98 80,101 81,104 84,104 85,102" />
  152.               <path fill="#050505" d="M 158,97 C 165,97 171,98 170,101 169,104 166,104 165,102" />
  153.               <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 119,102 C 118,111 115,119 98,117 85,115 84,108 84,104 84,97 94,96 105,97 112,98 117,98 119,102 Z" />
  154.               <path stroke="#050505" stroke-width="3" fill="rgba(240,240,255,0.4)" d="M 131,102 C 132,111 135,119 152,117 165,115 166,108 166,104 166,97 156,96 145,97 138,98 133,98 131,102 Z" />
  155.               <path class="hair" d="M 60,109 C 59,39 118,40 129,40 139,40 187,43 189,99 135,98 115,67 115,67 115,67 108,90 80,109 86,101 91,92 92,87 85,99 65,108 60,109" />
  156.               <path id="mouth" fill="#d73e3e" d="M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z" />
  157.               <path id="smile" fill="white" d="M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z" clip-path="url(#lips)" />
  158.             </g>
  159.             <g id="shirt">
  160.               <path fill="#8665c2" d="M 132,170 C 146,170 154,200 154,200 154,200 158,250 158,250 158,250 92,250 92,250 92,250 96,200 96,200 96,200 104,170 118,170 118,170 125,172 125,172 125,172 132,170 132,170 Z"/>
  161.               <path id="arm-left" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 118,178 C 94,179 66,220 65,254" />
  162.               <path id="arm-right" class="arm" stroke="#8665c2" fill="none" stroke-width="14" d="M 132,178 C 156,179 184,220 185,254" />
  163.               <path fill="white" d="M 117,166 C 117,166 125,172 125,172 125,182 115,182 109,170 Z" />
  164.               <path fill="white" d="M 133,166 C 133,166 125,172 125,172 125,182 135,182 141,170 Z" />
  165.               <circle cx="125" cy="188" r="4" fill="#5a487b" />
  166.               <circle cx="125" cy="202" r="4" fill="#5a487b" />
  167.               <circle cx="125" cy="216" r="4" fill="#5a487b" />
  168.               <circle cx="125" cy="230" r="4" fill="#5a487b" />
  169.               <circle cx="125" cy="244" r="4" fill="#5a487b" />
  170.               <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-left" d="M 51,270 C 46,263 60,243 63,246 65,247 66,248 61,255 72,243 76,238 79,240 82,243 72,254 69,257 72,254 82,241 86,244 89,247 75,261 73,263 77,258 84,251 86,253 89,256 70,287 59,278" />
  171.               <path stroke="#daa37f" stroke-width="1" class="skin hand" id="hand-right" d="M 199,270 C 204,263 190,243 187,246 185,247 184,248 189,255 178,243 174,238 171,240 168,243 178,254 181,257 178,254 168,241 164,244 161,247 175,261 177,263 173,258 166,251 164,253 161,256 180,287 191,278"/>
  172.             </g>
  173.           </g>
  174.         </svg>
  175.       </div>
  176.       <div class="more-info">
  177.         <h1>Jane Doe</h1>
  178.         <div class="coords">
  179.           <span>Group Name</span>
  180.           <span>Joined January 2019</span>
  181.         </div>
  182.         <div class="coords">
  183.           <span>Position/Role</span>
  184.           <span>City, Country</span>
  185.         </div>
  186.         <div class="stats">
  187.           <div>
  188.             <div class="title">Awards</div>
  189.             <i class="fa fa-trophy"></i>
  190.             <div class="value">2</div>
  191.           </div>
  192.           <div>
  193.             <div class="title">Matches</div>
  194.             <i class="fa fa-gamepad"></i>
  195.             <div class="value">27</div>
  196.           </div>
  197.           <div>
  198.             <div class="title">Pals</div>
  199.             <i class="fa fa-group"></i>
  200.             <div class="value">123</div>
  201.           </div>
  202.           <div>
  203.             <div class="title">Coffee</div>
  204.             <i class="fa fa-coffee"></i>
  205.             <div class="value infinity">∞</div>
  206.           </div>
  207.         </div>
  208.       </div>
  209.     </div>
  210.     <div class="general">
  211.       <h1>Jane Doe</h1>
  212.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a volutpat mauris, at molestie lacus. Nam vestibulum sodales odio ut pulvinar.</p>
  213.       <span class="more">Mouse over the card for more info</span>
  214.     </div>
  215.   </div>

  217. </div>
复制代码
CSS
  1. @import url('https://fonts.googleapis.com/css?family=Abel');

  3. html, body {
  4.   background: #FCEEB5;
  5.   font-family: Abel, Arial, Verdana, sans-serif;
  6. }

  8. .center {
  9.   position: absolute;
  10.   top: 50%;
  11.   left: 50%;
  12.   -webkit-transform: translate(-50%, -50%);
  13. }

  15. .card {
  16.   width: 450px;
  17.   height: 250px;
  18.   background-color: #fff;
  19.   background: linear-gradient(#f8f8f8, #fff);
  20.   box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  21.   border-radius: 6px;
  22.   overflow: hidden;
  23.   position: relative;
  24.   margin: 1.5rem;
  25. }

  27. .card h1 {
  28.   text-align: center;
  29. }

  31. .card .additional {
  32.   position: absolute;
  33.   width: 150px;
  34.   height: 100%;
  35.   background: linear-gradient(#dE685E, #EE786E);
  36.   transition: width 0.4s;
  37.   overflow: hidden;
  38.   z-index: 2;
  39. }

  41. .card.green .additional {
  42.   background: linear-gradient(#92bCa6, #A2CCB6);
  43. }


  46. .card:hover .additional {
  47.   width: 100%;
  48.   border-radius: 0 5px 5px 0;
  49. }

  51. .card .additional .user-card {
  52.   width: 150px;
  53.   height: 100%;
  54.   position: relative;
  55.   float: left;
  56. }

  58. .card .additional .user-card::after {
  59.   content: "";
  60.   display: block;
  61.   position: absolute;
  62.   top: 10%;
  63.   right: -2px;
  64.   height: 80%;
  65.   border-left: 2px solid rgba(0,0,0,0.025);*/
  66. }

  68. .card .additional .user-card .level,
  69. .card .additional .user-card .points {
  70.   top: 15%;
  71.   color: #fff;
  72.   text-transform: uppercase;
  73.   font-size: 0.75em;
  74.   font-weight: bold;
  75.   background: rgba(0,0,0,0.15);
  76.   padding: 0.125rem 0.75rem;
  77.   border-radius: 100px;
  78.   white-space: nowrap;
  79. }

  81. .card .additional .user-card .points {
  82.   top: 85%;
  83. }

  85. .card .additional .user-card svg {
  86.   top: 50%;
  87. }

  89. .card .additional .more-info {
  90.   width: 300px;
  91.   float: left;
  92.   position: absolute;
  93.   left: 150px;
  94.   height: 100%;
  95. }

  97. .card .additional .more-info h1 {
  98.   color: #fff;
  99.   margin-bottom: 0;
  100. }

  102. .card.green .additional .more-info h1 {
  103.   color: #224C36;
  104. }

  106. .card .additional .coords {
  107.   margin: 0 1rem;
  108.   color: #fff;
  109.   font-size: 1rem;
  110. }

  112. .card.green .additional .coords {
  113.   color: #325C46;
  114. }

  116. .card .additional .coords span + span {
  117.   float: right;
  118. }

  120. .card .additional .stats {
  121.   font-size: 2rem;
  122.   display: flex;
  123.   position: absolute;
  124.   bottom: 1rem;
  125.   left: 1rem;
  126.   right: 1rem;
  127.   top: auto;
  128.   color: #fff;
  129. }

  131. .card.green .additional .stats {
  132.   color: #325C46;
  133. }

  135. .card .additional .stats > div {
  136.   flex: 1;
  137.   text-align: center;
  138. }

  140. .card .additional .stats i {
  141.   display: block;
  142. }

  144. .card .additional .stats div.title {
  145.   font-size: 0.75rem;
  146.   font-weight: bold;
  147.   text-transform: uppercase;
  148. }

  150. .card .additional .stats div.value {
  151.   font-size: 1.5rem;
  152.   font-weight: bold;
  153.   line-height: 1.5rem;
  154. }

  156. .card .additional .stats div.value.infinity {
  157.   font-size: 2.5rem;
  158. }

  160. .card .general {
  161.   width: 300px;
  162.   height: 100%;
  163.   position: absolute;
  164.   top: 0;
  165.   right: 0;
  166.   z-index: 1;
  167.   box-sizing: border-box;
  168.   padding: 1rem;
  169.   padding-top: 0;
  170. }

  172. .card .general .more {
  173.   position: absolute;
  174.   bottom: 1rem;
  175.   right: 1rem;
  176.   font-size: 0.9em;
  177. }
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表