一个div布局成一个扑克牌老k-html代码-BFW代码库

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
]</title>
<style>
body {
  background: #1e1d1b;
}

.card {
  display: block;
  position: absolute;
  top: calc(50% - 133px);
  left: calc(50% - 97px);
  width: 194px;
  height: 266px;
  border-radius: 14px;
  background: #eef1e6;
}
.card:before, .card:after {
  display: block;
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  --bs-red: #944534;
  --bs-yel: #fd9e3a;
  --bs-gre: #babab4;
  --bs-grd: #453f3a;
  --bs-bla: #1e1d1b;
  --bs-whi: #f0efe5;
  --bs-pin: #fbc696;
  --bs-blu: #2986bb;
  --spread: 0px;
  background: #944534;
}
.card:before {
  top: 16px;
  left: 16px;
}
.card:after {
  top: 244px;
  left: 172px;
  transform: rotate(180deg);
}

.card:before, .card:after {
  box-shadow: 0px 0px var(--spread) var(--bs-red), 12px 0px var(--spread) var(--bs-red), 48px 0px var(--spread) var(--bs-yel), 72px 0px var(--spread) var(--bs-yel), 96px 0px var(--spread) var(--bs-yel), 120px 0px var(--spread) var(--bs-gre), 0px 6px var(--spread) var(--bs-red), 6px 6px var(--spread) var(--bs-red), 48px 6px var(--spread) var(--bs-yel), 54px 6px var(--spread) var(--bs-yel), 66px 6px var(--spread) var(--bs-yel), 72px 6px var(--spread) var(--bs-yel), 78px 6px var(--spread) var(--bs-yel), 90px 6px var(--spread) var(--bs-yel), 96px 6px var(--spread) var(--bs-yel), 114px 6px var(--spread) var(--bs-gre), 132px 6px var(--spread) var(--bs-yel), 138px 6px var(--spread) var(--bs-yel), 0px 12px var(--spread) var(--bs-red), 12px 12px var(--spread) var(--bs-red), 48px 12px var(--spread) var(--bs-bla), 54px 12px var(--spread) var(--bs-yel), 60px 12px var(--spread) var(--bs-yel), 66px 12px var(--spread) var(--bs-yel), 72px 12px var(--spread) var(--bs-yel), 78px 12px var(--spread) var(--bs-yel), 84px 12px var(--spread) var(--bs-yel), 90px 12px var(--spread) var(--bs-yel), 96px 12px var(--spread) var(--bs-yel), 114px 12px var(--spread) var(--bs-gre), 120px 12px var(--spread) var(--bs-gre), 132px 12px var(--spread) var(--bs-bla), 138px 12px var(--spread) var(--bs-bla), 0px 18px var(--spread) var(--bs-red), 12px 18px var(--spread) var(--bs-red), 24px 18px var(--spread) var(--bs-bla), 30px 18px var(--spread) var(--bs-bla), 36px 18px var(--spread) var(--bs-bla), 42px 18px var(--spread) var(--bs-bla), 48px 18px var(--spread) var(--bs-red), 54px 18px var(--spread) var(--bs-bla), 60px 18px var(--spread) var(--bs-yel), 66px 18px var(--spread) var(--bs-red), 72px 18px var(--spread) var(--bs-yel), 78px 18px var(--spread) var(--bs-red), 84px 18px var(--spread) var(--bs-yel), 90px 18px var(--spread) var(--bs-red), 96px 18px var(--spread) var(--bs-yel), 102px 18px var(--spread) var(--bs-bla), 108px 18px var(--spread) var(--bs-bla), 114px 18px var(--spread) var(--bs-gre), 120px 18px var(--spread) var(--bs-gre), 126px 18px var(--spread) var(--bs-gre), 132px 18px var(--spread) var(--bs-gre), 138px 18px var(--spread) var(--bs-gre), 24px 24px var(--spread) var(--bs-bla), 48px 24px var(--spread) var(--bs-bla), 54px 24px var(--spread) var(--bs-yel), 60px 24px var(--spread) var(--bs-yel), 66px 24px var(--spread) var(--bs-yel), 72px 24px var(--spread) var(--bs-yel), 78px 24px var(--spread) var(--bs-yel), 84px 24px var(--spread) var(--bs-yel), 90px 24px var(--spread) var(--bs-yel), 96px 24px var(--spread) var(--bs-yel), 114px 24px var(--spread) var(--bs-gre), 120px 24px var(--spread) var(--bs-gre), 132px 24px var(--spread) var(--bs-bla), 138px 24px var(--spread) var(--bs-bla), 6px 30px var(--spread) var(--bs-red), 24px 30px var(--spread) var(--bs-bla), 48px 30px var(--spread) var(--bs-pin), 54px 30px var(--spread) var(--bs-pin), 60px 30px var(--spread) var(--bs-pin), 66px 30px var(--spread) var(--bs-pin), 72px 30px var(--spread) var(--bs-bla), 78px 30px var(--spread) var(--bs-bla), 84px 30px var(--spread) var(--bs-bla), 90px 30px var(--spread) var(--bs-bla), 96px 30px var(--spread) var(--bs-bla), 114px 30px var(--spread) var(--bs-gre), 132px 30px var(--spread) var(--bs-gre), 138px 30px var(--spread) var(--bs-gre), 0px 36px var(--spread) var(--bs-red), 6px 36px var(--spread) var(--bs-red), 12px 36px var(--spread) var(--bs-red), 24px 36px var(--spread) var(--bs-bla), 48px 36px var(--spread) var(--bs-bla), 54px 36px var(--spread) var(--bs-bla), 60px 36px var(--spread) var(--bs-pin), 66px 36px var(--spread) var(--bs-pin), 72px 36px var(--spread) var(--bs-bla), 78px 36px var(--spread) var(--bs-bla), 84px 36px var(--spread) var(--bs-bla), 90px 36px var(--spread) var(--bs-bla), 96px 36px var(--spread) var(--bs-bla), 120px 36px var(--spread) var(--bs-gre), 132px 36px var(--spread) var(--bs-gre), 138px 36px var(--spread) var(--bs-gre), 0px 42px var(--spread) var(--bs-red), 6px 42px var(--spread) var(--bs-red), 12px 42px var(--spread) var(--bs-red), 24px 42px var(--spread) var(--bs-bla), 48px 42px var(--spread) var(--bs-pin), 54px 42px var(--spread) var(--bs-whi), 60px 42px var(--spread) var(--bs-pin), 66px 42px var(--spread) var(--bs-pin), 72px 42px var(--spread) var(--bs-bla), 78px 42px var(--spread) var(--bs-bla), 84px 42px var(--spread) var(--bs-bla), 90px 42px var(--spread) var(--bs-bla), 96px 42px var(--spread) var(--bs-bla), 102px 42px var(--spread) var(--bs-bla), 132px 42px var(--spread) var(--bs-gre), 138px 42px var(--spread) var(--bs-gre), 6px 48px var(--spread) var(--bs-red), 24px 48px var(--spread) var(--bs-bla), 48px 48px var(--spread) var(--bs-bla), 54px 48px var(--spread) var(--bs-bla), 60px 48px var(--spread) var(--bs-bla), 66px 48px var(--spread) var(--bs-pin), 72px 48px var(--spread) var(--bs-pin), 78px 48px var(--spread) var(--bs-bla), 84px 48px var(--spread) var(--bs-bla), 90px 48px var(--spread) var(--bs-bla), 96px 48px var(--spread) var(--bs-bla), 102px 48px var(--spread) var(--bs-bla), 132px 48px var(--spread) var(--bs-bla), 138px 48px var(--spread) var(--bs-bla), 24px 54px var(--spread) var(--bs-bla), 48px 54px var(--spread) var(--bs-pin), 54px 54px var(--spread) var(--bs-pin), 60px 54px var(--spread) var(--bs-bla), 66px 54px var(--spread) var(--bs-bla), 72px 54px var(--spread) var(--bs-pin), 78px 54px var(--spread) var(--bs-bla), 84px 54px var(--spread) var(--bs-bla), 90px 54px var(--spread) var(--bs-bla), 96px 54px var(--spread) var(--bs-bla), 102px 54px var(--spread) var(--bs-bla), 108px 54px var(--spread) var(--bs-bla), 132px 54px var(--spread) var(--bs-bla), 138px 54px var(--spread) var(--bs-bla), 24px 60px var(--spread) var(--bs-bla), 42px 60px var(--spread) var(--bs-bla), 48px 60px var(--spread) var(--bs-bla), 54px 60px var(--spread) var(--bs-pin), 60px 60px var(--spread) var(--bs-bla), 66px 60px var(--spread) var(--bs-bla), 72px 60px var(--spread) var(--bs-bla), 78px 60px var(--spread) var(--bs-bla), 84px 60px var(--spread) var(--bs-bla), 90px 60px var(--spread) var(--bs-whi), 96px 60px var(--spread) var(--bs-red), 102px 60px var(--spread) var(--bs-red), 108px 60px var(--spread) var(--bs-red), 114px 60px var(--spread) var(--bs-red), 120px 60px var(--spread) var(--bs-red), 132px 60px var(--spread) var(--bs-bla), 138px 60px var(--spread) var(--bs-bla), 24px 66px var(--spread) var(--bs-bla), 36px 66px var(--spread) var(--bs-red), 42px 66px var(--spread) var(--bs-bla), 48px 66px var(--spread) var(--bs-bla), 54px 66px var(--spread) var(--bs-bla), 60px 66px var(--spread) var(--bs-bla), 66px 66px var(--spread) var(--bs-bla), 72px 66px var(--spread) var(--bs-bla), 78p.........完整代码请登录后点击上方下载按钮下载查看
一个div布局成一个扑克牌老k

网友评论0

css使用details标签实现水平折叠面板效果代码

svg+css文字排版布局艺术效果代码

div+css布局实现波浪背景动画卡片效果代码

css布局实现砖头墙文字效果代码

div+Css布局实现拟态立体质感checkbox开关切换效果代码

div+Css布局实现checkbox播放与停止播放滑动切换按钮代码

div+css布局实现拍照按钮点击效果代码

div+Css布局耳机盒子效果代码

div+css布局实现立体质感radio播放按键按下切换单选效果代码

css实现div丁字形布局代码
