js+css实现摇骰子获取点数游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现摇骰子获取点数游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --skeleton-color: #fff7ea; --skeleton-shadow: #867556; } body{ margin: 5px 0; display: flex; flex-direction: column; align-items: center; width: 100vw; height: 99vh; max-height: 99vh; font-family: 'Luckiest Guy', cursive; letter-spacing: 2px; overflow: hidden; text-align: center; background: radial-gradient(circle, rgba(27,27,27,1) 0%, rgba(0,0,0,1) 100%); color: #f1f1f1; } header { padding: 10px 0; font-size: 34px; } div.small { font-size: 20px; font-family: 'Oswald', sans-serif; } span.value { color: lightgreen; font-size: 22px; font-family: 'Luckiest Guy', cursive; } div.content-container { width: 90%; height: 75%; border-radius: 2%; border: 4px solid rgba(254,97,0,1) } div.dice-container { display: flex; width: 100%; height: 100%; padding-top: 40px; justify-content: center; column-gap: 40px; aspect-ratio: 1 / 1; border-radius: 50%; } div.dice { cursor: pointer; align-items: center; display: grid; width: 120px; height: 120px; aspect-ratio: 1 / 1; justify-items: center; position: relative; border-radius: 2%; } div.dice-face-group { display: grid; width: 100%; height: 100%; grid-template-columns: 1fr; grid-template-rows: 1fr; transform-style: preserve-3d; transition: transform .75s ease-out; } div.dice .show-1{ transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg); } div.dice .show-2{ transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); } div.dice .show-3{ transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0