如何使用z-index模拟通过四连接板掉落的芯片以使其具有3d效果？

Question

我正在进行四局连通游戏，现在我可以将芯片放入适当的插槽中，也可以从红筹变为黄筹。但是，当您放下芯片时，它不会进入电路板。它位于板的外部。我希望被丢弃的芯片落在每个插槽内的深蓝色圆圈上，并落在插槽本身之下。因此，它看起来很逼真的3D效果。

我以为我可以使用z-index做到这一点，但是我有2个问题。1st当我将div槽设置为3的z-index时，即使下降的筹码的z-index为2；芯片仍然掉在插槽上吗？第二，即使确实可行，由于div的z索引较高，每个槽口中的深蓝色圆圈现在也将被隐藏，但它们必须保持相同才能使它们都可见。但是，如果它们相同，那么芯片不能落入电路板中吗？

关于如何产生这种效果的任何想法？

//grab all slot positions on the board

const slots = document.querySelectorAll('.board div');

let player = 'p1';

let board = [ 

    0, 1, 2, 3, 4, 5, 6,

    7, 8, 9, 10, 11, 12, 13,

    14, 15, 16, 17, 18, 19, 20,

    21, 22, 23, 24, 25, 26, 27,

    28, 29, 30, 31, 32, 33, 34,

    35, 36, 37, 38, 39, 40, 41,

]

//assign a class to each slot to represent its position

for(let i = 0; i < slots.length; i++) {

    //add class to each div

    slots[i].classList.add('c' + i);

    //add the slot to each div

    let slot = document.createElement('span');

    slots[i].appendChild(slot);

    //add the function with the game logic to each slot

    slots[i].addEventListener('click', runGame); 

}

function runGame() {

    //figure out which column the selected slot sits in

    const slotColumn = (Number(this.className.slice(1, 3)) % 7);

    //create an array to store all the slots that share the above column

    const columnArray = [];

    //grab all the slots that sit in that column

    for(let i = 0; i < board.length; i++) {

        if(board[i] % 7 === slotColumn) columnArray.push(board[i]);

    }

    //drop chip in the chosen column

    dropChip(columnArray);

    function dropChip(column) {

        //select bottom most slot that's available in the column

        for(let i = column.length - 1; i >= 0; i--) {

            if(column[i] !== 'p1' || column[i] !== 'p2') {

                board[column[i]] = player;

                slots[column[i]].classList.add(player);

                switchPlayer(player);

                break;

            }   

        }

        function switchPlayer(currentPlayer) {

            if(currentPlayer === 'p1') player = 'p2';

            else if(currentPlayer ==='p2') player = 'p1';

        }

    }

}

Answer 1

这是您的代码的修改后的版本。首先，我将芯片元素更改为仅考虑一个伪元素而不是2，并且使用CSS变量来轻松更改颜色。然后，对于电路板，我使用两个元素创建了每个单元，以便能够具有3D效果。您将看到伪元素，我在其中应用了径向渐变以创建孔，并且该层将位于芯片将落在后面的顶部：//grab all slot positions on the boardconst slots = document.querySelectorAll('.board div');let player = 'p1';let board = [&nbsp; 0, 1, 2, 3, 4, 5, 6,&nbsp; 7, 8, 9, 10, 11, 12, 13,&nbsp; 14, 15, 16, 17, 18, 19, 20,&nbsp; 21, 22, 23, 24, 25, 26, 27,&nbsp; 28, 29, 30, 31, 32, 33, 34,&nbsp; 35, 36, 37, 38, 39, 40, 41,]//assign a class to each slot to represent its positionfor (let i = 0; i < slots.length; i++) {&nbsp; //add class to each div&nbsp; slots[i].classList.add('c' + i);&nbsp; //add the slot to each div&nbsp; let slot = document.createElement('span');&nbsp; slots[i].appendChild(slot);&nbsp; //add the function with the game logic to each slot&nbsp; slots[i].addEventListener('click', runGame);}function runGame() {&nbsp; //figure out which column the selected slot sits in&nbsp; const slotColumn = (Number(this.className.slice(1, 3)) % 7);&nbsp; //create an array to store all the slots that share the above column&nbsp; const columnArray = [];&nbsp; //grab all the slots that sit in that column&nbsp; for (let i = 0; i < board.length; i++) {&nbsp; &nbsp; if (board[i] % 7 === slotColumn) columnArray.push(board[i]);&nbsp; }&nbsp; //drop chip in the chosen column&nbsp; dropChip(columnArray);&nbsp; function dropChip(column) {&nbsp; &nbsp; //select bottom most slot that's available in the column&nbsp; &nbsp; for (let i = column.length - 1; i >= 0; i--) {&nbsp; &nbsp; &nbsp; if (column[i] !== 'p1' || column[i] !== 'p2') {&nbsp; &nbsp; &nbsp; &nbsp; board[column[i]] = player;&nbsp; &nbsp; &nbsp; &nbsp; slots[column[i]].classList.add(player);&nbsp; &nbsp; &nbsp; &nbsp; switchPlayer(player);&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function switchPlayer(currentPlayer) {&nbsp; &nbsp; &nbsp; if (currentPlayer === 'p1') player = 'p2';&nbsp; &nbsp; &nbsp; else if (currentPlayer === 'p2') player = 'p1';&nbsp; &nbsp; }&nbsp; }}/** {&nbsp; &nbsp; outline: 1px solid red;}*/*,*:before,*:after {&nbsp; box-sizing: inherit;}html {&nbsp; box-sizing: border-box;}html,body {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; background-color: #e5e6e8;}body {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; min-height: 100vh;}.board-wrapper {&nbsp; padding-top: 100px;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; margin: auto auto 0 auto; /*ask why this is needed*/&nbsp; position: relative;&nbsp; overflow: hidden;}.board {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; max-width: 706px;&nbsp; background-color: #00c;&nbsp; padding: 3px;}.board div {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; position: relative;}.board div span {&nbsp; width: 80px;&nbsp; height: 80px;&nbsp; border-radius: 50%;&nbsp; background-color: #00c;&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; margin: auto;&nbsp; box-shadow: inset 0px 0px 13px #0606aa;}.board div span:before {&nbsp; content: "";&nbsp; position: absolute;&nbsp; top: -10px;&nbsp; left: -10px;&nbsp; right: -10px;&nbsp; bottom: -10px;&nbsp; background: radial-gradient(circle, transparent 40px, blue 0);&nbsp; border: 3px solid #00c;&nbsp; z-index: 3;}.board .chip {&nbsp; display: block;&nbsp; position: absolute;&nbsp; background-color: transparent;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;&nbsp; height: 100px;}.board .chip:after {&nbsp; content: "";&nbsp; width: 80px;&nbsp; height: 80px;&nbsp; border-radius: 50%;&nbsp; border: 15px solid red;&nbsp; background-color: red;&nbsp; box-shadow: inset 0px 0px 20px #cc0000;&nbsp; position: absolute;&nbsp; left: 3px;&nbsp; top: 0;&nbsp; opacity: 0;&nbsp; transition: all .5s ease;}.board div:nth-of-type(7n+1):hover~.chip:after {&nbsp; transform: translateX(10px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+1):hover~.chip:before {&nbsp; transform: translateX(10px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+2):hover~.chip:after {&nbsp; transform: translateX(110px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+2):hover~.chip:before {&nbsp; transform: translateX(110px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+3):hover~.chip:after {&nbsp; transform: translateX(210px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+3):hover~.chip:before {&nbsp; transform: translateX(210px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+4):hover~.chip:after {&nbsp; transform: translateX(310px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+4):hover~.chip:before {&nbsp; transform: translateX(310px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+5):hover~.chip:after {&nbsp; transform: translateX(410px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+5):hover~.chip:before {&nbsp; transform: translateX(410px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+6):hover~.chip:after {&nbsp; transform: translateX(510px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+6):hover~.chip:before {&nbsp; transform: translateX(510px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+7):hover~.chip:after {&nbsp; transform: translateX(610px);&nbsp; opacity: 1;}.board div:nth-of-type(7n+7):hover~.chip:before {&nbsp; transform: translateX(610px);&nbsp; opacity: 1;}.p1:after,.p2:after {&nbsp; content: "";&nbsp; display: inline-block;&nbsp; width: 80px;&nbsp; height: 80px;&nbsp; border-radius: 50%;&nbsp; border: 15px solid var(--c, red);&nbsp; background-color: var(--c, red);&nbsp; box-shadow: inset 0px 0px 20px var(--s, #cc0000);&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; margin: auto;&nbsp; z-index: 1;&nbsp; animation-name: drop;&nbsp; animation-fill-mode: forwards;&nbsp; animation-duration: .5s;&nbsp; animation-timing-function: ease-in;}.p2 {&nbsp; --c: yellow;&nbsp; --s: #ced639;}@keyframes drop {&nbsp; from {&nbsp; &nbsp; top: -1500px;&nbsp; }&nbsp; to {&nbsp; &nbsp; top: 0;&nbsp; }}<div class="board-wrapper">&nbsp; <div class="board">&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <div></div>&nbsp; &nbsp; <span class="chip"></span>&nbsp; </div></div>