Div 移動

Question

好吧，所以我一直在嘗試一切我能想到的讓這個 div 留在它在任何瀏覽器上的位置，我想我會求助於你們這些很棒的人來幫助我（我相信這是一個我忽略的簡單修復)

無論我做什么，它似乎都會把其他地方搞得一團糟。

我試圖將所有 div（和正文）放入固定的 position（這似乎在一定程度上起作用）

我還嘗試使整個頁面彎曲，希望如果我允許彎曲工作，那么它會圍繞有問題的項目彎曲。

我真的花了 2 天時間用這個把頭撞在牆上，我真的可以用另一雙眼睛看我的代碼來告訴我哪里出錯了。

非常感謝您的回復

我已經更新了我的代碼，現在可以在沒有圖像和顏色的情況下運行。 我已經設法解決了我遇到的一些問題，但現在當我從下往上移動頁面時，藍色的門縮小了

 #opening { background-color: red; min-width: 100%; max-width: 100%; max-height: 100%; min-height: 100%; margin-left: 0; margin-right: 0; background-attachment: fixed; }.wrap { background-color: purple; background-position: fixed; min-height: 140px; max-height: 140px; max-width: 360px; min-width: 360px; color: #fff; position: fixed; margin: 20vh; margin-left: 42%; padding: 30% 2% 0% 0%; } div.left { background-color: blue; text-align: center; max-width: 34vh; max-height: 62vh; min-width: 34vh; min-height: 62vh; /* background-image:url("door.png"); */ background-position: fixed; background-repeat: no-repeat; margin-left: 42.1%; margin-top: 12.5%; animation-name: open-left; animation-duration: 10s; animation-easing-function: cubic-bezier(.06, .63, 0, 1); animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 10s; position: fixed; top: 0; left: 0; } @-webkit-keyframes open-left { from { -webkit-transform: perspective(500) rotateY(0deg); -webkit-transform-origin: 0% 20%; } to { -webkit-transform: perspective(500) rotateY(89deg); -webkit-transform-origin: 0% 20%; } } button { background-color: #000000; max-width: 70%; max-height: 20; border: white; border-style: double; color: white; text-align: center; text-overflow: unset; font-size: 20px; margin-left: 1%; }

 <body id="opening"> <div class="wrap"> <span class="animated rubberBand infinite"> <div> <div> <button onclick="location.href = 'https://www.google.com';"class="button"> And the Gunslinger followed </button> </div> </div> </span> <div class="left"> </div> </div> </body>

這在全屏上給我一個 output

全尺寸頁面，無收縮

當我向左縮小屏幕時，這是 output

分區 position 移動

Answer 1

這就是你所追求的嗎？

 html, body { display: flex; background: #000 url('https://keiraj87.github.io/website/backg.png') top center no-repeat; height: 100%; width: 100%; margin: 0; padding: 0; } #door-wrap { height: 295px; width: 175px; margin: 150px auto 0 auto; perspective: 420px; transform-style: preserve-3d; } #door { height: 100%; width: 100%; background: url('https://keiraj87.github.io/website/door.png') top center no-repeat; background-size: 175px; animation: open-left 10s cubic-bezier(.06, .63, 0, 1) 0s 1 forwards; margin-left: -88px; } @keyframes open-left { from { transform: rotateY(0deg) translateX(88px); } to { transform: rotateY(-85deg) translateX(88px); } }

 <div id="door-wrap"> <div id="door"> </div> </div>

Div 移動

問題描述

1 個解決方案

解決方案1
1 2022-02-17 16:31:12

Div 移動

問題描述

1 個解決方案

解決方案1 1 2022-02-17 16:31:12

解決方案1
1 2022-02-17 16:31:12