html - 如何仅使用 CSS 将 "D-PAD" Controller 设置为如下所示？-6ren

html - 如何仅使用 CSS 将 "D-PAD" Controller 设置为如下所示？

转载作者：行者123 更新时间：2023-11-28 15:45:30

Example of finished DPAD

body {
    background-color: black; 
    margin: 0;
    padding: 0;
    overflow: hidden; 
}
div#controller {
    display: none; 
}
div#instructions {
    font-size: 20px;
    color: white; 
    position: static;
    text-align: center; 
}

@media only screen and (max-width: 480px) {
    div#instructions {
        display: none; 
    }
    div#controller { 
        display: flex; 
        position: relative;
        background-color: grey;
        opacity: 0.6;
        height: 33%;
        width: 80%;
    }
    div#controller.dpad {
        width: 60%; 
    }    
}

@media only screen and (max-width: 768px) {
    div#instructions {
        display: none; 
    }
    div#controller {
        display: flex;
        position: relative;
        top: 300px;  
        background-color: grey; 
        opacity: 0.6; 
        height: 50%;
        width: 80%;
    }
    div#controller.dpad {
        width: 33%;
    } 
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        
        <!-- The CSS is missing! Your mission is to re-create it -->
        <link rel="stylesheet" href="env3d.css" />
        
        <script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
        <script src="http://css.operatoroverload.com/exercise/game.js"></script>        
        
        <script type="text/javascript">         

         function playGame() {
             console.log("playGame");
             var game = new Game();

             game.setup();
             
             var env;
             if (game.env) {
                 env = game.env;
             } else {
                 env = new env3d.Env();
             }
            
             env.loop = game.loop.bind(game);             
             env.start();
         }
         
         window.addEventListener('load', function() {
            playGame();
         });
         
         document.addEventListener("contextmenu", function(e) {
             e.preventDefault();
         });         
         
        </script>
         
    </head>
    <body>
        <div id="controller">
            <div class="dpad">
                <button env3d-key="KEY_UP">UP</button>
                <button env3d-key="KEY_LEFT">LEFT</button>
                <button env3d-key="KEY_RIGHT">RIGHT</button>
                <button env3d-key="KEY_DOWN">DOWN</button>
            </div>
            <button env3d-key="KEY_A">A</button>
            <button env3d-key="KEY_Z">Z</button>            
        </div>
        <div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
        <div id="env3d"></div>        
    </body>
    
</html>

我有这个小元素要完成。但是，我完全无法理解如何仅使用 CSS 对移动 Controller 进行编码。我无法将其样式设置为看起来像图片。

谁能给我指出正确的去向？

谢谢!对你的帮助表示感谢! :)

最佳答案

伙计，我们在同一个网络开发类。 😂👌

您在哪一部分需要帮助？

首先，您必须调整屏幕底部的 #controller 和 .dpad div 的大小和位置。为此，您需要使用 position、width 和 height 属性。

然后您必须将按钮放置在它们的容器 div 中(也可以使用 position、width 和 height)。您可以使用 element>element、attribute=value 和/或 :nth-child() 选择器单独选择每个按钮 here.

如果你需要它，this 页面解释了如何通过给它属性 position: relative (or absolute);, top: 50%; 和 transform: translateY(-50%);。 (水平居中为 position: relative (or absolute);, left: 50%;, and transform: translateX(-50%);

希望对你有帮助!

关于html - 如何仅使用 CSS 将 "D-PAD" Controller 设置为如下所示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42797712/

文章推荐： html - 如何在 flexbox 中分层形状

文章推荐： swift - 将项目从 firebase 加载到 pickerview 的问题

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何仅使用 CSS 将 "D-PAD" Controller 设置为如下所示？