一个div布局成一个扑克牌老k
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0