html - 窗口调整大小时的动画定位
问题描述
我想知道是否可以使用 jquery window.resize() 来确保两个甜甜圈的位置永远不会与中间的主文本发生冲突。我不确定如何链接窗口大小的 x 和 y 以更改上/左和下/右定位值。
或者有没有办法可以在窗口调整大小时减少甜甜圈的宽度和高度?
任何帮助,将不胜感激!
html, body {
margin: 0;
}
#container {
width: 100vw;
height: 100vh;
background-color: pink;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
#donut img,
#donut2 img {
width: 500px;
height: 500px;
}
#donut {
width: auto;
height: auto;
position: absolute;
animation: donut 2s;
animation-fill-mode: forwards;
}
@keyframes donut {
0% {
left: -20%;
top: -20%;
transform: translateZ(-100px);
}
100% {
left: -5%;
top: -5%;
transform: translateZ(100px);
}
}
#donut2 {
width: auto;
height: auto;
position: absolute;
animation: donut2 2s;
animation-fill-mode: forwards;
}
@keyframes donut2 {
0% {
right: -20%;
bottom: -20%;
transform: translateZ(-100px);
}
100% {
right: -5%;
bottom: -5%;
transform: translateZ(-100px);
}
}
#homeText {
width: 100%;
height: auto;
text-align: center;
font-size: 30px;
}
<div id="container">
<div id="donut">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Glazed-Donut.jpg">
</div>
<div id="homeText">
<p>
Reward Points
</p>
<p>Get Your Daily Sweet Rewards</p>
</div>
<div id="donut2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Glazed-Donut.jpg">
</div>
</div>
解决方案
请试试这个。我认为这应该可行:-
#container {
width: 100vw;
height: 100vh;
background-color: pink;
display: flex;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#donut { width:30vw; }
#donut2 { width:30vw; }
#donut2 img, #donut img {
width: 100%;
max-width:100%;
height:auto;
}
#donut {
position: absolute;
animation: donut 2s;
animation-fill-mode: forwards;
}
@keyframes donut {
0% {
left: -5%;
top: -5%;
transform: translateZ(-100px);
}
100% {
left: 5%;
top: 5%;
transform: translateZ(100px);
}
}
#donut2 {
position: absolute;
animation: donut2 2s;
animation-fill-mode: forwards;
}
@keyframes donut2 {
0% {
right: -5%;
bottom: -5%;
transform: translateZ(-100px);
}
100% {
right: 5%;
bottom: 5%;
transform: translateZ(-100px);
}
}
#homeText {
width: 25vw;
height: auto;
text-align: center;
font-size: 30px;
}
推荐阅读
- reactjs - React / Jest / Typescript:默认导出未定义
- asp.net-mvc - SaveChanges() 并添加到数据库不起作用
- rust - 生成器似乎没有公开 `resume()` 方法
- javascript - 如何将 SqlDataReader 字符串转换为屏蔽密码字符串
- javascript - 将对象数组与对象进行比较并减少数量
- python - 切片列表的 enumerate() 无法按预期工作
- jquery - 如何使用 ipstack 和 ajax 获取用户的国家代码?
- java - 有没有办法加载(使用新文件())已导入项目文件夹的图像?
- r - 尝试在 S&P500 上计算 EWMA,但“[.xts`(x, i, which.i = TRUE) 中的错误:下标越界”中出现错误
- rust - 为什么 Clippy 建议传递 Arc 作为参考?