svg+css卡通风格人物信息卡片代码-html代码-BFW代码库

svg+css卡通风格人物信息卡片代码

代码语言：html

代码描述：svg+css卡通风格人物信息卡片代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
   body{
    padding:100px;
}
.card {
  /* Cute Doodle Palette */
  --bg-color: #fdfbf7;
  --ink-color: #2c2c2c;
  --paper-line: #e6e0d4;
  --tape-color: rgba(255, 221, 161, 0.85);
  --accent-coral: #ff8ba7;
  --accent-mint: #c6e377;
  --accent-lavender: #c0bbfe;
  --accent-yellow: #ffdf6c;

  font-size: 16px;
  position: relative;
  width: 17em;
  background:
    linear-gradient(var(--bg-color) 1.5em, transparent 1.5em) 0 0 / 100% 1.6em,
    linear-gradient(var(--paper-line) 0.08em, transparent 0.08em) 0 1.5em / 100%
      1.6em var(--bg-color);
  border: 0.25em solid var(--ink-color);
  /* Hand-drawn sketchy border radius */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow:
    0.5em 0.5em 0 var(--ink-color),
    inset 0 0 1.2em rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 1.5em 2em;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.3.........完整代码请登录后点击上方下载按钮下载查看