Hellow Guys,
Я создаю анимацию загрузки с помощью HTML и CSS.
Я действительно хочу, чтобы связать div с фоновым изображением и текстом
Это то, чего я хочу достичь:
Вот код того, что у меня есть на момент. Я пробовал исправление вложений и тому подобное, но главная проблема заключается в том, что изображение продолжает масштабироваться, когда я использую максимальную высоту / ширину, а текст перемещается вправо в зависимости от ширины веб-сайта.
Надеюсь, вы можете мне помочь, спасибо в совете.
body {
background: #111 url("");
background-size: 25vmin;
background-repeat: no-repeat;
background-position: center 40%;
height: 100vh;
margin: 0;
}
.logo {
background: url("https://openclipart.org/download/256338/whitecircle.svg");
background-size: 25vmin;
background-repeat: no-repeat;
position: absolute;
left: 28%;
bottom: 10vh;
height: 25vh;
width: 100px;
max-width: 150px;
}
h1 {
color: #fff;
position: absolute;
bottom: 20vh;
left: 35%;
}
.progress {
width: 400px;
max-width: 85vw;
height: 8px;
position: absolute;
bottom: 20vh;
left: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
overflow: hidden;
}
.progress:after {
content: '';
display: block;
width: 100%;
height: 8px;
background: #fff;
animation: load 5s linear;
}
@-moz-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@-o-keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes load {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="logo"> </div>
<h1 class="title"> Loading </h1>
<div class="progress"> </div>