Nano Hash - криптовалюты, майнинг, программирование

Скрыть элемент за прозрачным div, но не за фоном

Итак, у меня есть этот фрагмент, в котором я хочу сделать анимацию, где выкатывается меню входа в систему, поэтому я думаю о 2 методах. Либо измените левую позицию меню входа в систему, либо сделайте еще один div сверху, который будет медленно открывать меню входа после его перемещения. Но здесь возникает проблема с прозрачностью. В обоих методах я хочу покрыть div другим div, но оставить тот же фон. Есть ли какой-нибудь трюк с css, js или jq?

const accountImg = document.querySelector("#login");
let accountOpen = 0;

document.querySelector("#login").addEventListener("click", function () {
    if (accountOpen == 0) {
        document.querySelector(".login-wrap").classList.add("active");
        accountOpen = 1;
        document.querySelector("#username").style.opacity = "1";
        document.querySelector("#username").style.visibility = "visible";
        document.querySelector(".label-username").style.visibility = "visible";
        document.querySelector(".content-username").style.visibility = "visible";
        document.querySelector("#username").style.visibility = "visible";
        document.querySelector("#username").style.visibility = "visible";

        document.querySelector("#password").style.opacity = "1";
        document.querySelector("#password").style.visibility = "visible";
        document.querySelector(".label-password").style.visibility = "visible";
        document.querySelector(".content-password").style.visibility = "visible";
        document.querySelector("#password").style.visibility = "visible";
        document.querySelector("#password").style.visibility = "visible";

        document.querySelector(".login-wrap .login-btn").style.opacity = "1";
    } else {
        document.querySelector(".login-wrap.active").classList.remove("active");
        accountOpen = 0;
        document.querySelector("#password").style.opacity = "0";
        document.querySelector("#password").style.visibility = "hidden";
        document.querySelector(".label-password").style.visibility = "hidden";
        document.querySelector(".content-password").style.visibility = "hidden";
        document.querySelector("#password").style.visibility = "hidden";
        document.querySelector("#password").style.visibility = "hidden";

        document.querySelector("#username").style.opacity = "0";
        document.querySelector("#username").style.visibility = "hidden";
        document.querySelector(".label-username").style.visibility = "hidden";
        document.querySelector(".content-username").style.visibility = "hidden";
        document.querySelector("#username").style.visibility = "hidden";
        document.querySelector("#username").style.visibility = "hidden";
        document.querySelector("#login-messages").style.visibility = "hidden";
        document.querySelector(".login-wrap .login-btn").style.opacity = "0";
    }
});
body{
  margin: 0;
  background: url('https://lh3.googleusercontent.com/proxy/An3EDuoKa8Q75DplT1mH3_oHUHS0T6MkeVaHRbLO-0WSyZKv7yYz5SvddaAR5rqcfqQMu2G7wRSUyLix70v_51uyNRY6jeHKJ1CXIev6toY_x69dsa0sHZVAiGtzvt0GsbAcD1X0QqDQkXBC02DftWQIhbmKfhmnjbyCZpg') no-repeat 0 0 scroll;
  background-size: cover;
  backdrop-filter: blur(15px) contrast(.5);
  height: 100vh;
  width: 100vw;
}
.login-container{
  position: fixed;
  width: 50%;
  height: 75px;
  top: 0;
  left: 0;
  z-index: 2;
}
#login{
  position: fixed;
  top: 35px;
  left: 2%;
  width: 10%;
  height: 40px;
  border-radius: 14px;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #FFFFFF;
  background: rgba(0,0,0,0);
  font-family: 'Gordita Regular';
  font-size: 18px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000029;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
}
#login-front{
  position: fixed;
  width: 12%;
  height: 75px;
  top: 0;
  left: 0%;
  z-index: 5;
}
.login-wrap.active{
  position: fixed;
  width: 32%;
  height: 75px;
  top: 0;
  left: 15%;
  z-index: 2;
  animation: RollOut 1.2s ease;
}
@keyframes RollOut{
  0% {
    left: -40%;
  } 100% {
    left: 15%;
  }
}
.login-wrap > input{
  position: relative;
  width: 120px;
  height: 20px;
  opacity: 0;
  border: none;
  padding-left: 4px;
}
.login-wrap::after{
  content: '';
  width: 0;
  height: 30px;
  position: absolute;
  top: 40px;
  left: -5%;
  border-left: 1px solid #FFFFFF;
  opacity: 0.42;
}
/* Name */
#username {
  width: 46%;
  height: 75%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#username:-internal-autofill-selected{
  background-color: white!important;
}
.label-username {
  position: absolute;
  border-radius: 0;
  left: 0;
  top: 60%;
  width: 46%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-username {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-username:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
/* Heslo */
#password {
  left: 4.25%;
  width: 49%;
  height: 50%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#password:-internal-autofill-selected{
  background-color: white!important;
}
.label-password {
  position: absolute;
  border-radius: 0;
  left: 51%;
  width: 49%;
  top: 60%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-password {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-password:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
.login-wrap .login-btn{
  position: absolute;
  right: -80%;
  top: 50%;
  width: 140px;
  height: 35px;
  border-radius: 6px;
  opacity: 0;
  cursor: pointer;
  color: black;
  background: rgba(0, 0, 0, 0);
  border: 1px solid white;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="login-container">
        <div id="login-front">
            <button id="login">Admin</button>
        </div>
        <div class="login-wrap">
                <input type="text" id="username" name="username" autocomplete="off" required placeholder="Přezdívka">
                <label for="username" class="label-username">
                    <span class="content-username">Přezdívka</span>
                </label>
                <input type="text" id="password" name="password" autocomplete="off" required placeholder="Heslo">
                <label for="password" class="label-password">
                    <span class="content-password">Heslo</span>
                </label>
                <ul id="login-messages"></ul>
                <button class="login-btn">Přihlásit</button>
        </div>
    </div>
</body>

javascript html css transparency
22.08.2020

  • Отвечает ли это на ваш вопрос? Скрыть элементы за прозрачным DIV, но не за фоном 22.08.2020
  • Я пробовал несколько вещей с z-индексом, но на самом деле это не сработало для меня, я все еще могу видеть эти элементы, даже когда фон имеет более высокий z-индекс. 22.08.2020

Ответы:


1

Предлагая сделать это вместо двух div:

Попробуйте установить переход в классе login-wrap на

transition: width 1s ease-in-out

И просто измените ширину вашего элемента входа в систему с 0 пикселей на ширину, которая вам нужна каждый раз, когда кто-то нажимает кнопку.

P.s: также установите скрытое переполнение

РЕДАКТИРОВАТЬ: Здесь хороший пост о настройке перехода с высотой/шириной авто:

22.08.2020
  • Только что попробовал, но есть проблема, что каждый элемент начинает выкатывать с одного и того же места (с разной скоростью, но это не важно), поэтому вид хорошего эффекта пропадает. 22.08.2020
  • Ой, подождите, наверное, потому что я использовал % в качестве координат, спасибо. 22.08.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..