div+css实现AI魔术师猜你心中选择的扑克牌游戏代码
代码语言：html
所属分类：游戏
代码描述：仅使用div+css代码无js代码就能实现一个AI魔术师猜你心中选择的扑克牌游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
background: #456;
}
article {
outline: none;
width: 90vmin;
height: 90vmin;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
background:
/* hat */
linear-gradient(black, black) 50% 25% / 15% 0.5%,
linear-gradient(purple, purple) 50.125% 23.5% / 9.4% 2%,
conic-gradient(at 50% 600%, black 4.5deg, transparent 4.75deg 356.25deg, black 356.5deg) 49.5% 14.5% / 15% 12%,
/* face */
radial-gradient(farthest-side at 0% 50%, #963 80%, transparent 0) 46.5% 24% / 2% 6%,
radial-gradient(farthest-side at 100% 50%, #963 80%, transparent 0) 53.5% 24% / 2% 5%,
linear-gradient(white, white) 50% 33% / 2.5% 0.25%,
radial-gradient(farthest-side at 50% 0%, #900 99%, transparent) 50% 33.25% / 2.5% 1%,
linear-gradient(#c003, #d85) 50.25% 29% / 0.25% 2%,
radial-gradient(closest-side, #fca 99.9%, transparent 0) 49.75% 31% / 2.25% 1.75%,
radial-gradient(closest-side, #d85 99.9%, transparent 0) 50.5% 30.75% / 1.75% 1.75%,
radial-gradient(closest-side, #fca 99.9%, transparent 0) 50% 35% / 2.5% 2.5%,
radial-gradient(closest-side, #fca 99.9%, transparent 0) 49% 25.5% / 3% 3%,
radial-gradient(closest-side, #963 99.9%, transparent 0) 50% 25% / 3% 3%,
radial-gradient(closest-side, black 80%, transparent 0) 48.5% 28% / 1% 1%,
radial-gradient(closest-side, black 80%, transparent 0) 51.5% 28% / 1% 1%,
radial-gradient(farthest-side at 130% 20%, #fca 80%, transparent 0) 47% 27% / 6% 18%,
radial-gradient(farthest-side at -30% 20%, #fca 80%, transparent 0) 53% 27% / 6% 18%,
radial-gradient(closest-side, #963 80%, transparent 0) 47% 25% / 6% 7.75%,
radial-gradient(closest-side, #963 80%, transparent 0) 53% 25% / 6% 8%,
radial-gradient(closest-side, #da8 80%, transparent 0) 47% 28.6% / 6% 7%,
radial-gradient(closest-side, #da8 80%, transparent 0) 53% 28.6% / 6% 7%,
/* bowtie */
radial-gradient(closest-side, #b00 90%, transparent 0) 50% 38.25% / 2% 2%,
conic-gradient(transparent 58deg, #e00 0 122deg, transparent 0 238deg, #d00 0 302deg, transparent 0) 50% 38% / 7.5% 4%,
/* body */
radial-gradient(closest-side, black 80%, transparent 0) 50% 49% / 1% 1%,
radial-gradient(closest-side, black 80%, transparent 0) 50% 45% / 1% 1%,
radial-gradient(closest-side, black 80%, transparent 0) 50% 41% / 1% 1%,
radial-gradient(farthest-side at 140% 20%, white 80%, transparent 82%) 49% 48% / 2% 20%,
radial-gradient(farthest-side at -40% 20%, white 80%, transparent 82%) 51% 48% / 2% 20%,
linear-gradient(black, black) 50% 55% / 5.5% 30%,
linear-gradient(#c97, #fca) 50% 35% / 1.75% 7%,
/* shoes */
radial-gradient(farthest-side at 40% 150%, black 90%, transparent 0) 59% 100% / 10% 2.5%,
radial-gradient(farthest-side at 60% 120%, black 90%, transparent 0) 41% 100% / 10% 2.5%,
/* pants */
radial-gradient(farthest-side at 50% 100%, transparent 50%, #000 50.75% 70%, transparent 71%) 50% 100% / 10% 70%,
/* arms */
linear-gradient(80deg, transparent 40%, white 41% 51%, transparent 52%) 66.33% 28% / 5% 2%,
linear-gradient(80deg, transparent 40%, black 41% 51%, transparent 52%) 67.25% 30.5% / 5% 9%,
radial-gradient(closest-side, #fca 99%, transparent 0) 68% 37.25% / 3% 2%,
radial-gradient(closest-side, #fca 99%, transparent 0) 69% 36% / 4% 4%,
radial-gradient(closest-side, #fca 99%, transparent 0) 42.125% 68.75% / 3% 2%,
radial-gradient(closest-side, #fca 99%, transparent 0) 41.125% 70% / 4% 4%,
radial-gradient(farthest-side at 100% 100%, transparent 80%, black 81% 90%, transparent 91%) 44.75% 50.75% / 11% 32.5%,
radial-gradient(farthest-side at 50% 0%, transparent 78%, black 79% 90%, transparent 91%) 63% 46% / 18% 15%,
linear-gradient(white, white) 68.5% 38.25% / 1% 1.5%,
linear-gradient(white, white) 41.33% 67.75% / 1% 1.5%,
/* penguin */
radial-gradient(farthest-side at 0% 0%, black 80%, transparent 0) 47.5% 71% / 2% 45%,
radial-gradient(farthest-side at 100% 0%, black 80%, transparent 0) 52.5% 70% / 2% 45%,
linear-gradient(#111, #222) 50% 75% / 6.6% 10%,
radial-gradient(farthest-side at 50% 0%, #222 80%, transparent 0) 48.25% 86% / 4.5% 15%,
radial-gradient(farthest-side at 50% 0%, #222 80%, transparent 0) 51.6% 86% / 4.5% 15%,
/* bg */
radial-gradient(40% 40% at 50% 55%, #678, #456)
;
background-color: #f001;
background-repeat: no-repeat;
overflow: hidden;
}
article::after {
content: "魔术猜牌，点击开始!";
white-space: pre;
box-sizing: border-box;
padding: 2.5vmin;
padding-bottom: 5.5vmin;
font-family: Georgia, Garamond, serif;
font-size: 2.5vmin;
line-height: 3.5vmin;
display: block;
width: 39%;
background:
linear-gradient(#dd8, #dd8) 0 0 / 100% calc(100% - 3vmin),
conic-gradient(at 100% 100%, transparent 310deg, #dd8 0 340deg, #0000 0) 95% 100% / 5vmin 3.5vmin
;
background-repeat: no-repeat;
}
article::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 400%;
height: 22vmin;
transform: translate(0vmin, 0);
background:
/* card 1 step 1 */
linear-gradient(#d00, #d00) 91vmin 2vmin / 0.25vmin 1.5vmin,
linear-gradient(55deg, #0000 40%, #d00 0 60%, #0000 0) 91.1vmin 2.375vmin / 0.9vmin 1.125vmin,
linear-gradient(-55deg, #0000 45%, #d00 0 65%, #0000 0) 91.1vmin 2vmin / 0.9vmin 1.125vmin,
linear-gradient(#d00, #d00) 102.875vmin 18.5vmin / 0.25vmin 1.5vmin,
linear-gradient(55deg, #0000 40%, #d00 0 60%, #0000 0) 102.175vmin 18.5vmin / 0.9vmin 1.125vmin,
linear-gradient(-55deg, #0000 45%, #d00 0 65%, #0000 0) 102.175vmin 18.875vmin / 0.9vmin 1.125vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 90.6vmin 3.75vmin / 0.8vmin 0.8vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 91.4vmin 3.75vmin / 0.8vmin 0.8vmin,
conic-gradient(at 50% 100%, #d00 38deg, transparent 0 322deg, #d00 0) 90.6vmin 4.25vmin / 1.5vmin 1.2vmin,
linear-gradient(to right, black 50%, white 0) 97vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 99vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 94vmin 14vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 96vmin 14vmin / 1vmin 1vmin,
linear-gradient(-45deg, #0000 10%, #d00 0 90%, #0000 0) 92.5vmin 50% / 9vmin 2vmin,
conic-gradient(at 100% -100%, #fa8 223deg, #0000 0) 92.5vmin 6vmin / 9vmin 4.5vmin,
conic-gradient(at 0% 200%, #fa8 43deg, #0000 0) 92.5vmin 11.5vmin / 9vmin 4.5vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 92.75vmin 4.25vmin / 4.25vmin 4.25vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 97vmin 13vmin / 4.25vmin 4.25vmin,
linear-gradient(-45deg, gold 50%, #0000 0) 97vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, gold 50%, #0000 0) 98.5vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, #0000 50%, gold 0) 92.5vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, #0000 50%, gold 0) 94vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0) 92.25vmin 50% / 9.5vmin 16vmin,
linear-gradient(to right, black 1px, transparent 0 calc(100% - 1px), black 0) 92.25vmin 50% / 9.5vmin 16vmin,
linear-gradient(white, white) 90.5vmin 50% / 13vmin 85%,
/* card 2 step 1 */
radial-gradient(farthest-side at 50% 0%, transparent 65%, #000 0 99.9%, #0000 0) 106.25vmin 3vmin / 1vmin 0.75vmin,
linear-gradient(#000, #000) 107vmin 2vmin / 0.25vmin 1.25vmin,
radial-gradient(farthest-side at 50% 100%, transparent 65%, #000 0 99.9%, #0000 0) 117.5vmin 18vmin / 1vmin 0.75vmin,
linear-gradient(#000, #000) 117.5vmin 18.5vmin / 0.25vmin 1.25vmin,
radial-gradient(farthest-side at 50% 100%, black 99.9%, #0000) 106.25vmin 4vmin / 0.75vmin 0.375vmin,
radial-gradient(farthest-side at 100% 50%, black 99.9%, #0000) 105.875vmin 4.4vmin / 0.375vmin 0.75vmin,
radial-gradient(farthest-side at 0% 50%, black 99.9%, #0000) 106.875vmin 4.4vmin / 0.375vmin 0.75vmin,
conic-gradient(#000 25deg, #0000 0 40deg, #000 0 120deg, #0000 0 165deg, #000 0 195deg, #0000 0 240deg, #000 0 320deg, #0000 0 335deg, #000 0) 106.25vmin 4.375vmin / 0.75vmin 1.125vmin,
linear-gradient(to right, black 50%, white 0) 112.25vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 114.25vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 109.25vmin 14vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 111.25vmin 14vmin / 1vmin 1vmin,
linear-gradient(-45deg, #0000 10%, #000 0 90%, #0000 0) 107.75vmin 50% / 9vmin 2vmin,
conic-gradient(at 100% -100%, #fa8 223deg, #0000 0) 107.75vmin 6vmin / 9vmin 4.5vmin,
conic-gradient(at 0% 200%, #fa8 43deg, #0000 0) 107.75vmin 11.5vmin / 9vmin 4.5vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 108vmin 4.25vmin / 4.25vmin 4.25vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 112.25vmin 13vmin / 4.25vmin 4.25vmin,
linear-gradient(gold, gold) 112.5vmin 5.25vmin / 4.25vmin 1vmin,
linear-gradient(gold, gold) 107.75vmin 15.75vmin / 4.25vmin 1vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 112.625vmin 3.5vmin / 4vmin 4vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 107.875vmin 14.5vmin / 4vmin 4vmin,
linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0) 107.5vmin 50% / 9.5vmin 16vmin,
linear-gradient(to right, black 1px, transparent 0 calc(100% - 1px), black 0) 107.5vmin 50% / 9.5vmin 16vmin,
linear-gradient(white, white) 105.75vmin 50% / 13vmin 85%,
/* card 3 step 1 */
linear-gradient(#000, #000) 121.5vmin 2vmin / 0.25vmin 1.5vmin,
linear-gradient(55deg, #0000 40%, #000 0 60%, #0000 0) 121.6vmin 2.375vmin / 0.9vmin 1.125vmin,
linear-gradient(-55deg, #0000 45%, #000 0 65%, #0000 0) 121.6vmin 2vmin / 0.9vmin 1.125vmin,
linear-gradient(#000, #000) 133.375vmin 18.5vmin / 0.25vmin 1.5vmin,
linear-gradient(55deg, #0000 40%, #000 0 60%, #0000 0) 132.75vmin 18.5vmin / 0.9vmin 1.125vmin,
linear-gradient(-55deg, #0000 45%, #000 0 65%, #0000 0) 132.75vmin 18.875vmin / 0.9vmin 1.125vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 121.25vmin 4.4vmin / 0.75vmin 0.75vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 121.875vmin 4.4vmin / 0.75vmin 0.75vmin,
conic-gradient(at 50% 0%, transparent 148deg, #000 0 215deg, transparent 0) 121.25vmin 3.75vmin / 1.4vmin 1vmin,
linear-gradient(black, black) 121.875vmin 5.125vmin / 0.125vmin 0.5vmin,
linear-gradient(to right, black 50%, white 0) 127.5vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 129.5vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 124.5vmin 14vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 126.5vmin 14vmin / 1vmin 1vmin,
linear-gradient(-45deg, #0000 10%, #000 0 90%, #0000 0) 123vmin 50% / 9vmin 2vmin,
conic-gradient(at 100% -100%, #fa8 223deg, #0000 0) 123vmin 6vmin / 9vmin 4.5vmin,
conic-gradient(at 0% 200%, #fa8 43deg, #0000 0) 123vmin 11.5vmin / 9vmin 4.5vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 123.25vmin 4.25vmin / 4.25vmin 4.25vmin,
radial-gradient(closest-side, #d00 99.9%, #0000 0) 127.5vmin 13vmin / 4.25vmin 4.25vmin,
linear-gradient(-45deg, gold 50%, #0000 0) 127.5vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, gold 50%, #0000 0) 129vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, #0000 50%, gold 0) 123vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, #0000 50%, gold 0) 124.5vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0) 122.75vmin 50% / 9.5vmin 16vmin,
linear-gradient(to right, black 1px, transparent 0 calc(100% - 1px), black 0) 122.75vmin 50% / 9.5vmin 16vmin,
linear-gradient(white, white) 121vmin 50% / 13vmin 85%,
/* card 4 step 1 */
radial-gradient(closest-side, #0000 65%, #d00 0 99.9%, #0000 0) 136.5vmin 2vmin / 1.25vmin 1.5vmin,
linear-gradient(45deg, transparent 35%, #d00 0 65%, transparent 0) 137.25vmin 3vmin / 0.6vmin 0.6vmin,
radial-gradient(closest-side, #0000 65%, #d00 0 99.9%, #0000 0) 147.875vmin 18.5vmin / 1.25vmin 1.5vmin,
linear-gradient(45deg, transparent 35%, #d00 0 65%, transparent 0) 147.875vmin 18.5vmin / 0.6vmin 0.6vmin,
conic-gradient(at 50% 0%, #0000 150deg, #d00 0 210deg, #0000 0) 136.5vmin 3.75vmin / 1.125vmin 1vmin,
conic-gradient(at 50% 100%, #d00 30deg, #0000 0 330deg, #d00 0) 136.5vmin 4.75vmin / 1.125vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 142.75vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 144.75vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 139.75vmin 14vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 141.75vmin 14vmin / 1vmin 1vmin,
linear-gradient(-45deg, #0000 10%, #d00 0 90%, #0000 0) 138.25vmin 50% / 9vmin 2vmin,
conic-gradient(at 100% -100%, #fa8 223deg, #0000 0) 138.25vmin 6vmin / 9vmin 4.5vmin,
conic-gradient(at 0% 200%, #fa8 43deg, #0000 0) 138.25vmin 11.5vmin / 9vmin 4.5vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 138.5vmin 4.25vmin / 4.25vmin 4.25vmin,
radial-gradient(closest-side, #000 99.9%, #0000 0) 142.75vmin 13vmin / 4.25vmin 4.25vmin,
linear-gradient(45deg, gold 50%, #0000 0) 143vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, gold 50%, #0000 0) 144.25vmin 3.5vmin / 3vmin 2.75vmin,
linear-gradient(-45deg, #0000 50%, gold 0) 138.25vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(45deg, #0000 50%, gold 0) 139.5vmin 15.75vmin / 3vmin 2.75vmin,
conic-gradient(at 50% 0, #0000 150deg, gold 0 210deg, #0000 0) 143.625vmin 3.5vmin / 3vmin 2.75vmin,
conic-gradient(at 50% 100%, gold 30deg, #0000 0 330deg, gold 0) 138.875vmin 15.75vmin / 3vmin 2.75vmin,
linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0) 138vmin 50% / 9.5vmin 16vmin,
linear-gradient(to right, black 1px, transparent 0 calc(100% - 1px), black 0) 138vmin 50% / 9.5vmin 16vmin,
linear-gradient(white, white) 136.25vmin 50% / 13vmin 85%,
/* card 5 step 1 */
radial-gradient(closest-side, #0000 65%, #000 0 99.9%, #0000 0) 151.75vmin 2vmin / 1.25vmin 1.5vmin,
linear-gradient(45deg, transparent 35%, #000 0 65%, transparent 0) 152.5vmin 3vmin / 0.6vmin 0.6vmin,
radial-gradient(closest-side, #0000 65%, #000 0 99.9%, #0000 0) 163.125vmin 18.5vmin / 1.25vmin 1.5vmin,
linear-gradient(45deg, transparent 35%, #000 0 65%, transparent 0) 163.125vmin 18.5vmin / 0.6vmin 0.6vmin,
radial-gradient(farthest-side at 50% 100%, black 99.9%, #0000) 152vmin 4vmin / 0.75vmin 0.375vmin,
radial-gradient(farthest-side at 100% 50%, black 99.9%, #0000) 151.625vmin 4.4vmin / 0.375vmin 0.75vmin,
radial-gradient(farthest-side at 0% 50%, black 99.9%, #0000) 152.625vmin 4.4vmin / 0.375vmin 0.75vmin,
conic-gradient(#000 25deg, #0000 0 40deg, #000 0 120deg, #0000 0 165deg, #000 0 195deg, #0000 0 240deg, #000 0 320deg, #0000 0 335deg, #000 0) 152vmin 4.375vmin / 0.75vmin 1.125vmin,
linear-gradient(to right, black 50%, white 0) 158vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, black 50%, white 0) 160vmin 7vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 155vmin 14vmin / 1vmin 1vmin,
linear-gradient(to right, white 50%, black 0) 157vmin 14vmin / 1vmin 1vmin,
linear-gradient(-45deg, #0000 10%, #000 0 90%, #0000 0) 153.5vmin 50% / 9vmin 2vmin,
conic-gradien.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0