Блог

Главная - Вопросы по программированию - Как я могу поместить анимированное изображение внутри неподвижного прямоугольника?

Как я могу поместить анимированное изображение внутри неподвижного прямоугольника?

#html

#HTML

Вопрос:

Я хочу поместить изображение внутри прямоугольника и переместить изображение вправо, пока прямоугольник неподвижен и не движется. Моя проблема в том, что мне не удается поместить изображение внутри прямоугольника без перемещения прямоугольника. Я получил желаемый результат с определенным размером экрана, используя поля и позиционируя изображение, но когда я изменяю размер окна, оно не будет на том же месте.

Как сохранить его на изображении внутри прямоугольника в том же месте?

 body { 
    margin: 0px;
}

.top-shelf {
    height: 5vh;
    width: 100vw;
    background-color: rgb(40, 121, 197);
    opacity: 50%;
}

.logo-outline {
    border-radius: 35px;
    border: 5px solid rgba(4, 22, 29, 0.137);
    width: 130px;
    height: 130;
    margin-top: 1%;
    margin-left: 3%;
    padding: 30px;
}


.rotate-logo{
    position: absolute;
    top: 7%;
    left: 3%;
    transition: all 4s;
    -webkit-transition: all 4s; 
    transform: translate(130px, 0);
    -webkit-transform: translate(130px,0);
    background-image: url('owl-logo.png');
    
}


.text-heading{
    text-align: center
}  
 <!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"/>
<title>Cool Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="top-shelf"></div>
    <div class="logo-outline">
            <img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" class="rotate-logo" width="70" height="70">
    </div>
    <div class="text-heading">
        <h1 style="font-family: courier;">Cool title</h1>
    </div>

</body>
</html>

сильный текст

Комментарии:

1. Привет. Не могли бы вы сгенерировать образец экземпляра желаемого результата?

Ответ №1:

Одна вещь, которую вы могли бы попробовать, это просто позволить изображению оставаться в div, позволяя ему перемещаться по странице, как обычно. Если изображение находится только в div, его размер должен автоматически соответствовать его содержимому. Затем вы можете повлиять на положение изображения, используя свойства CSS, такие как margin или transform.

 #logo-outline {
  border-radius: 35px;
  border: 5px solid rgba(4, 22, 29, 0.137);
  width: 130px;
  padding: 2px;
}

#rotate-logo {
  height: 70px;
  transition: transform ease 100ms;
}

#logo-outline:hover #rotate-logo {
  transform: translateX(60px);  /* 130px - 70px width */
}  
 <div id="logo-outline">
  <img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" id="rotate-logo">
</div>