js+css模拟打桌球小球物理运动效果代码
代码语言:html
所属分类:动画
代码描述:js+css模拟打桌球小球物理运动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #3F4D63; background: repeating-conic-gradient(from 45deg, #3F4D63 0deg 90deg, #495973 90deg 180deg); background-size: 50px 50px; animation: scrollBackground; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes scrollBackground { 0% { background-position: 0px 0px; } 100% { background-position: 50px 50px; } } h1 { color: white; font-family: sans-serif; font-weight: 100; font-size: 1.5em; text-shadow: 4px 4px rgba(0, 0, 0, 0.5); margin-top: 0; margin-bottom: 12px; } .pool-table-border { border: 20px solid #7B373B; box-shadow: 8px 8px rgba(0, 0, 0, 0.5); border-radius: 8px; } .pool-table-field { position: relative; width: 600px; height: 300px; background: #387D7A; box-shadow: 6px 6px rgba(0, 0, 0, 0.5) inset; background: repeating-conic-gradient(from 45deg, #387D7A 0deg 90deg, #456B7A 90deg 180deg); background-size: 50px 50px; } .ball { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; position: absolute; transform: translate(-10px, -10px); border-radius: 10px; box-shadow: 3px 3px rgba(0, 0, 0, 0.5); } .ball-number { text-align: center; width: 12px; height: 12px; background: white; border-radius: 10px; font-family: sans-serif; font-size: 8px; line-height: 12px; font-weight: bold; } .ball-white { background: white; top: 150px; left: 150px; } .ball-red { background: red; top: 150px; left: 400px; } .ball-yellow-striped { background: linear-gradient(0deg, #FFFFFF 10%, #E9C46A 10%, #E9C46A 90%, #FFFFFF 90%); top: 140px; left: 420px; } .ball-green-striped { background: linear-gradient(0deg, #FFFFFF 10%, #2A9D8F 10%, #2A9D8F 90%, #FFFFFF 90%); top: 160px; left: 420px; } .ball-brown-striped { background: linear-gradient(0deg, #FFFFFF 10%, #7F4F24 10%, #7F4F24 90%, #FFFFFF 90%); top: 130px; left: 440px; } .ball-black { background: black; top: 150px; left: 440px; } .ball-purple-striped { background: linear-gradient(0deg, #FFFFFF 10%, purple 10%, purple 90%, #FFFFFF 90%); top: 170px; left: 440px; } .ball-blue-striped { background: linear-gradient(0deg, #FFFFFF 10%, #0096C7 10%, #0096C7 90%, #FFFFFF 90%); top: 120px; left: 460px; } .ball-orange { background: #F4A261; top: 140px; left: 460px; } .ball-green { background: #2A9D8F; top: 160px; left: 460px; } .ball-blue { background: #0096C7; top: 180px; left: 460px; } .ball-orange-striped { background: linear-gradient(0deg, #FFFFFF 10%, #F4A261 10%, #F4A261 90%, #FFFFFF 90%); top: 110px; left: 480px; } .ball-yellow { background: #E9C46A; top: 130px; left: 480px; } .ball-purple { background: purple; top: 150px; left: 480px; } .ball-red-striped { background: linear-gradient(0deg, #FFFFFF 10%, red 10%, red 90%, #FFFFFF 90%); top: 170px; left: 480px; } .ball-brown { background: #7F4F24; top: 190px; left: 480px; } @media screen and (max-width: 768px) { h1 { transform: translateY(-80px); } .pool-table-border { transform: rotate(-90deg) scale(0.75, 0.75); } } </style> </head> <body> <h1>Click the table to shoot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0