我希望制作数字婚礼请柬,尽管我不是网络开发人员。
我正在尝试创建一个具有非常简单的动画的页面,其中有一个显示邀请的信封。我使用 html 和 css 重叠了三个简单的图像:
打开的信封 - 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>
尚方宝剑之说
胡子哥哥
守着一只汪
相关分类