div+css布局实现一个台球桌打台球效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现一个台球桌打台球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root{ --top1: 46%; --top2: 47%; --top3: 48%; --top4: 49%; --top5: 50%; } *, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; } body{ overflow: hidden; background-color: whitesmoke; } .wrapper{ display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; } .snooker{ position: relative; width: 70%; height: 60%; min-height: 500px; max-height: 600px; max-width: 960px; margin-right: 20%; background-clip: border-box; border:0; background-color: #5b49be; /* background-image: radial-gradient(circle, #93f07b, #64cf50); */ background-image: linear-gradient(90deg, rgba(255,255,255,.07) 90%, transparent 90%), linear-gradient(90deg, rgba(255,255,255,.03) 90%, transparent 90%), linear-gradient(90deg, transparent 90%, rgba(255,255,255,.07) 90%), linear-gradient(90deg, transparent 90%, rgba(255,255,255,.09) 90%); background-size: 13px, 29px, 37px, 53px; box-shadow: inset 20px 20px #1f0076, inset -20px -20px #1a0076, inset 22px 22px 4px #000, inset -22px -22px 4px #000; } .snooker::before{ content: ''; display: block; width: calc(100% + 50px); height: calc(100% + 50px); border-color: #000000; border-style: solid; border-width: 25px; background-color: transparent; position: absolute; top: -25px; left: -25px; right: 0; bottom: 0; border-radius: 5%; } .snooker::after{ content: ''; display: block; width: 50%; background-color:rgba(0,0,0,.22); filter:blur(50px); position: absolute; top: 20px; left: 20px; bottom: 20px; } .pocket{ width: 100%; height: 100%; } .pocket > div{ position: absolute; background: transparent; width: 60px; height: 60px; border-radius:20% 0 20% 20%; box-shadow:-15px 15px #d6d6d6; /* overflow: hidden; */ } .pocket-top-right{ top: -20px; right: -20px; transform: translate(-20px,20px) rotate(180deg); } .pocket-bottom-right{ bottom: -20px; right: -20px; transform: translate(-20px,-20px) rotate(-90deg); } .pocket-top-left{ top: -20px; left: -20px; transform: translate(20px,20px) rotate(90deg); box-shadow:-15px 15px #d6d6d6 !important; } .pocket-bottom-left{ bottom: -20px; left: -20px; transform: translate(20px,-20px); box-shadow:-15px 15px #d6d6d6 !important; } .pocket > div::before{ content: ''; display: block; position: absolute; width: 70%; height: 70%; border-radius:50%; background-color: #033601; bottom: -5px; left: -5px; z-index: 2; box-shadow: inset 15px -10px 5px rgba(2,34,1,.8); } .pocket-bottom-right::after{ content: ''; display: block; position: absolute; border-radius:100% 30%; box-shadow:-25px -15px 10px #FFF; background-color: transparent; width: 10px; height: 30px; transform: rotate(80deg) translate(150px,-50px) scale(12); opacity: .65; } /* SNOOKE BALL */ .ball{ width: 32px; height: 32px; border-radius: 50%; position: absolute; z-index: 3; -webkit-perspective: 600; box-shadow: inset 4px 5px 3px rgba(0,0,0,.15), inset -4px -2px 5px rgba(0,0,0,.2), inset 6px -10px 5px rgba(0,0,0,.1), 4px 5px 3px rgba(0,0,0,.2); } .white-ball{ background-color: #FFF; left: 80%; top: var(--top5); animation: roll-ball-white .5s ease-out 5.8s forwards; } .white-ball::before{ content:''; background-color: #FFF; width: 15px; height: 35px; display: block; position: absolute; right: 0; filter: blur(6px); opacity: 0; animation: smoke .3s ease alternate 5.7s 1; } .ball:not(.white-ball){ text-align: center; line-height: 2.1rem; font-weight: bold; font-size: .7rem; letter-spacing: -1px; } .ball:not(.white-ball)::before{ content: ''; display: block; border-radius: 50%; background-color: rgba(255,255,255,.8); width: 15px; height: 15px; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%,-50%); } .ball-1{ background-color: #b78b22; left: 10%; top: calc(var(--top1) - 62px); animation: left-top 1s ease-out 6.2s 1 forwards, hide-ball .5s ease 7.1s 1 forwards; } .ball-2{ background-color: #004882; left: 10%; top: calc(var(--top1) - 28px); animation: rotate360 11s ease-out 6.2s 1 forwards; } .ball-3{ background-color: #aa0122; left: 10%; top: calc(var(--top1) + 6px); animation: shake-ball3 8s linear 6.2s 1 forwards, hide-ball .5s ease 11s 1 forwards; } .ball-4{ background-color: #4d2969; left: 10%; top: calc(var(--top1) + 40px); animation: shake-ball4 4s ease-out 6.2s 1 forwards; } .ball-5{ background-color: #ca4a00; left: 10%; top: calc(var(--top1) + 74px); animation: left-bottom 1s ease-out 6.2s 1 forwards, hide-ball .5s ease 7.1s 1 forwards; } .ball-6{ background-color: #006a50; left: calc(10% + 32px); top: calc(var(--top2) + 18px); animation: rotate180 10s ease-out 6.2s 1 forwards; } .ball-7{ background-color: #5e311c; left: calc(10% + 32px); top: calc(var(--top2) - 15px); animation: rotate360 9s ease-out 6.2s 1 forwards; } .ball-8{ background-color: #000; left: calc(10% + 32px); top: calc(var(--top2) - 48px); animation: shake-ball8 4s ease-out 6.2s 1 forwards; } .ball-9{ background-color: #b78b22; left: calc(10% + 32px); top: calc(var(--top2) + 52px); animation: shake-ball9 3s ease-out 6.2s 1 forwards; } .ball-10{ background-color: #004882; left: calc(10% + 64px); top: calc(var(--top3) + 35px); animation: shake-ball10 3s ease-out 6.2s 1 forwards; } .ball-11{ background-color: #aa0122; left: calc(10% + 64px); top: calc(var(--top3) - 35px); animation: shake-ball11 3s ease-out.........完整代码请登录后点击上方下载按钮下载查看
网友评论0