我希望制作数字婚礼请柬，尽管我不是网络开发人员。我正在尝试创建一个具有非常简单的动画的页面，其中有一个显示邀请的信封。我使用 html 和 css 重叠了三个简单的图像：正面信封 - https://i.ibb.co/HBZsxLt/optipng.png邀请 - https://i.ibb.co/h7SfR5L/part.png打开的信封 - https://i.ibb.co/HtkgNPy/all.png我能够为我想要实现的目标创建代码（如下所列）。 三个图像重叠，我可以用两行简单的 JavaScript 来移动信封。当我用 Chrome 打开它时，重叠效果非常好。然而，我的问题来自以下几点：当我用 Firefox 打开网站时，邀请函的一些像素会从信封中出来当我从任何智能手机打开网站时，除了信封邀请尺寸问题外，所有图像都会缩放或移动到左侧。我尝试搜索是否有任何方法以自适应方式重叠图像（从设备/浏览器的角度来看），也许只使用 JavaScript，但我没有找到任何东西。我只发现我已经在下面实现了 css 和 html 方法。我发现解决问题的最简单的方法是在正文中插入 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条经验 获得超4个赞
在这里我改变了一些事情：
我删除了
img {
height: 50%;
padding: 80px 0;
overflow: visible; /* For Firefox */
}
然后在信封内的所有 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 适用于移动设备，如果其小于 603px 的 width，它将进行调整。还添加了 position: relative 来调整内部的 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 添加百分比填充，因为图像没有正确剪切。它以百分比为单位，因此它将针对移动设备进行缩放。
这是您更改后的代码：
<!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>
但我认为现在你必须稍微调整一下动画脚本。
胡子哥哥
TA贡献1825条经验 获得超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条经验 获得超3个赞
元素可能由于多种原因重叠，通过使用 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，我们可以在浏览器加载完所有图像后触发动画，确保其播放良好。
或者我们可以添加交互性，以便当用户单击或悬停信封时它会打开。
- 3 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消