动画在窗口调整大小上的位置

Question

I was wondering if it was possible to use jquery window.resize() to ensure the two donuts positioning never collides with the home text in the middle. I'm not sure how to link the x and y of the window size to change the top/left and bottom/right positioning values.

Or is there a way I could decrease the width and height of the donuts on window resize?

Any help would be appreciated!

 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> 

Answer 1

Please Try This. I think this should be work:-

#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;
}