我希望制作數(shù)字婚禮請柬，盡管我不是網(wǎng)絡開發(fā)人員。我正在嘗試創(chuàng)建一個具有非常簡單的動畫的頁面，其中有一個顯示邀請的信封。我使用 html 和 css 重疊了三個簡單的圖像：正面信封 - https://i.ibb.co/HBZsxLt/optipng.png邀請 - https://i.ibb.co/h7SfR5L/part.png打開的信封 - https://i.ibb.co/HtkgNPy/all.png我能夠為我想要實現(xiàn)的目標創(chuàng)建代碼（如下所列）。 三個圖像重疊，我可以用兩行簡單的 JavaScript 來移動信封。當我用 Chrome 打開它時，重疊效果非常好。然而，我的問題來自以下幾點：當我用 Firefox 打開網(wǎng)站時，邀請函的一些像素會從信封中出來當我從任何智能手機打開網(wǎng)站時，除了信封邀請尺寸問題外，所有圖像都會縮放或移動到左側(cè)。我嘗試搜索是否有任何方法以自適應方式重疊圖像（從設(shè)備/瀏覽器的角度來看），也許只使用 JavaScript，但我沒有找到任何東西。我只發(fā)現(xiàn)我已經(jīng)在下面實現(xiàn)了 css 和 html 方法。我發(fā)現(xiàn)解決問題的最簡單的方法是在正文中插入 gif，但我不太喜歡它。我的簡單代碼是：<!DOCTYPE html><html><head> <title>Invitation wedding</title> <style> body { margin: 0; background-color: white; } #container { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } img { height: 50%; padding: 80px 0; overflow: visible; /* For Firefox */ } .env { position: absolute; } .partecipazione{ height: 130%; padding-top: 20%; position: absolute; padding-right: 22px; } .allEnvelope{ padding-top: 20%; position: absolute; } </style></head><body> <div id="container"> <div class="allEnvelope"> <img id="allEnv" src="all.png"></img> </div> <div class="partecipazione"> <img id="part" src="part.png"></img> </div> <div class="env"> <img id="envelope" src="optipng.png"></img> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> <script> var timeline = new TimelineMax(); timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7'); </script></body></html>
3 回答
尚方寶劍之說
TA貢獻1788條經(jīng)驗 獲得超4個贊
在這里我改變了一些事情：
我刪除了
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
然后在信封內(nèi)的所有 div 周圍添加一個額外的容器以進行放置：
<div id="container">
<div class="envelopeWrapper">
<div class="allEnvelope">
<img id="allEnv" src="all.png"></img>
</div>
<div class="partecipazione">
<img id="part" src="part.png"></img>
</div>
<div class="env">
<img id="envelope" src="optipng.png"></img>
</div>
</div>
</div>
款式：
.envelopeWrapper{
width: 603px;
max-width: 95%;
height: 500px;
position: relative;
}
這里的高度只是放在屏幕中間。 max-width 適用于移動設(shè)備，如果其小于 603px 的 width，它將進行調(diào)整。還添加了 position: relative 來調(diào)整內(nèi)部的 div。 在新包裝器中添加了所有 div/圖像的樣式：
.env, .partecipazione, .allEnvelope {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.envelopeWrapper img{
max-width: 100%;
height: auto;
}
.partecipazione{
padding-left: 2%;
padding-right: 6%;
padding-bottom: 7%;
}
使用絕對位置，我將其放置在新包裝器 div 底部的角落處。 我需要為 .partecipazione 添加百分比填充，因為圖像沒有正確剪切。它以百分比為單位，因此它將針對移動設(shè)備進行縮放。
這是您更改后的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Invitation wedding</title>
<style>
body {
margin: 0;
background-color: white;
}
#container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.envelopeWrapper{
width: 603px;
max-width: 95%;
height: 500px;
position: relative;
}
.env, .partecipazione, .allEnvelope {
position: absolute;
right: 0;
left: 0;
bottom: 0;
}
.envelopeWrapper img{
max-width: 100%;
height: auto;
}
.partecipazione{
padding-left: 2%;
padding-right: 6%;
padding-bottom: 7%;
}
</style>
</head>
<body>
<div id="container">
<div class="envelopeWrapper">
<div class="allEnvelope">
<img id="allEnv" src="all.png"></img>
</div>
<div class="partecipazione">
<img id="part" src="part.png"></img>
</div>
<div class="env">
<img id="envelope" src="optipng.png"></img>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script>
var timeline = new TimelineMax();
timeline.to('#envelope, #allEnv', .6, {y:290}, '+=.7');
</script>
</body>
</html>
但我認為現(xiàn)在你必須稍微調(diào)整一下動畫腳本。
胡子哥哥
TA貢獻1825條經(jīng)驗 獲得超6個贊
您可以使用 CSS 添加瀏覽器前綴。這是新的 CSS 代碼。
<style type="text/css">
body {
margin: 0;
background-color: white;
}
#container {
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
.env {
position: absolute;
}
.partecipazione{
height: 130%;
padding-top: 20%;
position: absolute;
padding-right: 22px;
}
.allEnvelope{
padding-top: 20%;
position: absolute;
}
</style>
守著一只汪
TA貢獻1872條經(jīng)驗 獲得超4個贊
元素可能由于多種原因重疊，通過使用 z-index 屬性，我們可以確保字母保持我們想要的垂直順序。如果您使用過的話，它與 Photoshop 中的圖層相同。
使用 Puschi 的上述示例，我們可以將 z-index 添加到以下類：
.partecipazione {
z-index: 1
}
.env {
z-index: 2;
}
.env 類將保留在底部的默認層中，將字母放在其上方，然后將打開的信封再次放在其上方。這可以確保元素不重疊。
這是一個使用 CSS 和 CSS 的 Codesandbox。 JavaScript
https://codesandbox.io/s/sparkling-resonance-49b2w?file=/index.html:591-627
通過使用 JavaScript，我們可以在瀏覽器加載完所有圖像后觸發(fā)動畫，確保其播放良好。
或者我們可以添加交互性，以便當用戶單擊或懸停信封時它會打開。
- 3 回答
- 0 關(guān)注
- 241 瀏覽
添加回答
舉報
0/150
提交
取消