Как центрировать анимированный индикатор прокрутки вниз на изображении, но между травой и полом
Как центрировать анимированный индикатор "прокрутки вниз" на изображении но между травой и полом. В CSS это обозначается классом .indicator. Я пробовал выравнивать по центру и выравнивать текст, чтобы посмотреть, сработает ли это, но это не так.
/*controls for drop down indicator*/
.indicator {
position: relative;
width: 60px;
height: 60px;
transform: rotate(45deg);
}
.indicator span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
border: none;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
animation: animate 1s linear infinite;
}
.indicator span:nth-child(1) {
top: -30px;
left: -30px;
animation-delay: 0s;
border-color: goldenrod;
}
.indicator span:nth-child(2) {
top: -15px;
left: -15px;
animation-delay: 0.2s;
border-color: greenyellow;
}
.indicator span:nth-child(3) {
top: 0px;
left: 0px;
animation-delay: 0.4s;
border-color: orange;
}
.indicator span:nth-child(4) {
top: 15px;
left: 15px;
animation-delay: 0.6s;
border-color: darkred;
}<div class = "looneys">
<img src = "images/nobackgroundmotion-Recovered2.png" width = "100%">
<div class = "indicator">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>Спасибо за совет, я вот это сделал.
сосредоточьтесь на деталях и не нужно добавлять шумы к вашему вопросу, такие как Я новичок или Благодарность .. и одного кода CSS недостаточно, нам нужен полный код HTML / CSS
Обратите внимание, что вы можете использовать фрагменты стека, чтобы показать нам здесь, в Stack Overflow. Когда вы задаете свой вопрос редактировать, нажмите кнопку, которая выглядит как страница с <> на ней. Вы получите места для размещения HTML и CSS. Пожалуйста, постарайтесь ограничить код до уровня, достаточного для демонстрации проблемы, а не всего приложения.
хорошо, я использовал редактирование сейчас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете попробовать добавить в свой класс индикатора:
position: absolute;
transform: rotate(45deg) translate3d(-50%, 0, 0);
left: 50%;
bottom: 70px;
z-index: 1;
Братан, ты потрясающий, большое спасибо. В настоящий момент, когда я пытаюсь сделать его отзывчивым, я замечаю, что индикатор не содержится в самом изображении, есть идеи, как это сделать?
вы можете добавить position: relative; в класс looneys
Боже мой, ты потрясающий, большое тебе спасибо, я надеюсь, что однажды я смогу стать таким, как ты.
Разместите свой код в вопросе и подробнее объясните, в чем заключается ваша проблема и чего вы хотите. Внешние ссылки имеют тенденцию ломаться, и, поскольку они не поддаются проверке, участники не решаются щелкнуть правильно.