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;
}.........完整代码请登录后点击上方下载按钮下载查看
网友评论0