js+svg实现三维像素绘画效果代码
代码语言:html
所属分类:其他
代码描述:js+svg实现三维像素绘画效果代码,旋转立方体颜色,在平面上点击立方体落下。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/backpack.css"> <style> body { perspective: 2000px; overflow: hidden; height: 100vh; width: 100vw; background: #f1ebdb; } .board { display: flex; flex-shrink: 0; align-items: center; position: relative; width: 100vmin; height: 100vmin; padding: 15vmin; margin: 0 auto; transform-style: preserve-3d; transition: transform 1s ease; z-index: 10; transform: rotateX(39deg) rotateZ(66deg); } body[data-zoom=far] .board { transform: rotateX(31deg) rotateZ(80deg) rotateY(27deg) scale(0.7); } .board__inner { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .board__inner:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background: #bcd3b2; pointer-events: none; z-index: -1; } .board__tile { display: block; width: 100%; cursor: pointer; background: #bcd3b2; transform-style: preserve-3d; } .board__tile:hover { background: #aec7a3; } .board__block { display: block; position: relative; width: 99%; height: 99%; transform: rotateY(-90deg) translateX(100%) rotateY(90deg); transform-style: preserve-3d; pointer-events: none; -webkit-animation: bounce 0.2s cubic-bezier(1, 0.07, 0.54, 1.46); animation: bounce 0.2s cubic-bezier(1, 0.07, 0.54, 1.46); } .board__block:before, .board__block:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; } .board__block:after { transform: rotateY(90deg) translateX(50%); right: -49%; filter: brightness(1.1); } .board__block:before { transform: rotateY(90deg) translateX(50%) rotateX(90deg); top: 49%; filter: brightness(0.9); } .board__block.green, .board__block.green:before, .board__block.green:after { background: #72ac5a; } .board__block.brown, .board__block.brown:before, .board__block.brown:after { background: #96724a; } .board__block.blue, .board__block.blue:before, .board__block.blue:after { background: #70aae5; } .colors { position: fixed; bottom: 2rem; right: 2rem; display: flex; gap: 2rem; } .colors > button { display: block; width: 4rem; height: 4rem; border: 0.2rem solid transparent; } .colors > button[data-selected] { border-color: black; } .colors > button[data-color=green] { background: #72ac5a; } .colors > button[data-color=brown] { background: #96724a; } .colors > button[data-color=blue] { background: #70aae5; } .colors[data-selected=green] > button[data-color=green] { border-color: black; } .colors[data-selected=brown] > button[data-color=brown] { border-color: black; } .colors[data-selected=blue] > button[data-color=blue] { border-color: black; } .zoom { position: fixed; bottom: 2rem; left: 2rem; display: flex; gap: 2rem; } .zoom > button { display: block; width: 4rem; height: 4rem; border: 0; } .zoom > button > svg { width: 100%; pointer-events: none; } @-webkit-keyframes bounce { from { transform: rotateY(-90deg) translateX(200%) rotateY(90deg); } to { transform: rotateY(-90deg) translateX(100%) rotateY(90deg); } } @keyframes bounce { from { transform: rotateY(-90deg) translateX(200%) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0