Modulo di registrazione di accesso HTML con effetto carta 3D

37 mohkerrouche9

Apri nell'Editor Pubblica il Tuo Codice

Modulo di registrazione di accesso HTML con effetto carta 3D

Consigliato

21 October 2024

Attiva/disattiva registrazione

6 April 2025

trova un amante e un sito di incontri

12 January 2025

Un codice di Mikeykun

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="3d-auth.css">
</head>
    <body>
        <div class="auth-container">
            
            <div class="auth-form login-form">
                <div class="auth-card main-card">
                    <h2>Вход</h2>
                    <div class="card-content">
                        <div class="auth-input">
                            <input type="text" placeholder="Логин">
                            <input type="password" placeholder="Пароль">
                        </div>
                        <button class="auth-button" id="login-button">Войти</button>
                        <a id="forgot-password">Забыли пароль?</a>
                    </div>
                </div>
            </div>

<div class="auth-form register-form">
                <div class="auth-card">
                    <h2>Регистрация</h2>
                    <div class="card-content">
                        <div class="auth-input">
                            <input type="text" placeholder="Логин">
                            <input type="email" placeholder="Email">
                            <input type="password" placeholder="Пароль">
                            <input type="password" placeholder="Повторите пароль">
                        </div>
                        <button class="auth-button" id="register-button">Зарегистрироваться</button>
                    </div>
                </div>
            </div>

<div class="recovery-card">
                <h2>Восстановление</h2>
                <div class="card-content">
                    <div class="auth-input">
                        <input type="email" placeholder="Введите email">
                    </div>
                    <button class="auth-button" id="recovery-button">Отправить</button>
                    <a class="back-to-login">Вернуться назад</a>
                </div>
            </div>

<div class="verification-card">
                <h2>Подтверждение</h2>
                <div class="card-content">
                    <div class="auth-input">
                        <input type="text" placeholder="Введите код из письма">
                    </div>
                    <button class="auth-button">Подтвердить</button>
                    <a class="back-to-recovery">Вернуться назад</a>
                </div>
            </div>
        </div>
        <script>
            document.getElementById('forgot-password').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.add('show-recovery');
            });

document.querySelector('.back-to-login').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.remove('show-recovery');
                document.querySelector('.auth-container').classList.remove('show-verification');
            });

document.getElementById('recovery-button').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.add('show-verification');
            });

document.querySelector('.back-to-recovery').addEventListener('click', function() {
                document.querySelector('.auth-container').classList.remove('show-verification');
            });

document.querySelectorAll('.login-form, .register-form, .recovery-card, .verification-card').forEach(card => {
                let bounds;

const handleMove = (e) => {
                    const rect = card.getBoundingClientRect();
                    
                    // Вычисляем позицию мыши относительно центра карточки
                    const mouseX = e.clientX - (rect.left + rect.width / 2);
                    const mouseY = e.clientY - (rect.top + rect.height / 2);
                    
                    // Вычисляем углы поворота
                    const rotateX = (mouseY / (rect.height / 2)) * -10;
                    const rotateY = (mouseX / (rect.width / 2)) * 10;
                    
                    // Применяем трансформацию
                    card.style.transform = `
                        perspective(1000px)
                        rotateX(${rotateX}deg)
                        rotateY(${rotateY}deg)
                        translateZ(10px)
                    `;

// Обновляем эффект блика
                    const glare = card.querySelector('.card-glare');
                    if (glare) {
                        const glareX = ((e.clientX - rect.left) / rect.width) * 100;
                        const glareY = ((e.clientY - rect.top) / rect.height) * 100;
                        glare.style.background = `
                            radial-gradient(
                                circle at ${glareX}% ${glareY}%,
                                rgba(255, 255, 255, 0.08) 0%,
                                rgba(255, 255, 255, 0.03) 25%,
                                rgba(255, 255, 255, 0) 50%
                            )
                        `;
                    }
                };

const handleLeave = () => {
                    let CardRotate = 0;
                    let CardTranslateX = 0;

if(card.classList.contains('login-form')){
                        CardRotate = 25;
                        CardTranslateX = -50;
                    } else if(card.classList.contains('register-form')){
                        CardRotate = -25;
                        CardTranslateX = 50;
                    } else if(card.classList.contains('recovery-card')){
                        CardRotate = 0;
                        CardTranslateX = 0;
                    } else if(card.classList.contains('verification-card')){
                        CardRotate = 0;
                        CardTranslateX = 0;
                    } else {
                        CardRotate = 0;
                        CardTranslateX = 0;
                    }

// Плавно возвращаем в исходное положение
                    card.style.transform = `
                        perspective(1000px)
                        rotateX(0deg)
                        rotateY(${CardRotate}deg)
                        translateX(${CardTranslateX}px)
                        translateY(0)
                        translateZ(-100px)
                    `;

const glare = card.querySelector('.card-glare');
                    if (glare) {
                        glare.style.background = 'none';
                    }
                };

// Добавляем слушатели событий
                card.addEventListener('mousemove', handleMove);
                card.addEventListener('mouseleave', handleLeave);

// Добавляем элемент для блика
                const glare = document.createElement('div');
                glare.className = 'card-glare';
                card.appendChild(glare);
            });
        </script>
    </body>
</html>

CSS

:root {
    --bg: #101010;
    --auth-bg: #101010;
    --auth-text: #fff;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(
        350deg,
        #5b72f3, #8B9BFA, #6B7280, #4B5563,
        #395375, #373d80, #203552, #1E3A8A,
        #3c65d6, #33569c, #162b53, #18243a,
        #3b5996, #375daa, #103c94, #2c426d
    );
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-form{
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    margin: 0 8rem 0 8rem;
    padding: 40px;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
}

.auth-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    perspective: 2000px;
}

.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.auth-button{
    position: relative;
    width: 200px;
    margin: 25px 0;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 5px 15px rgba(255, 71, 87, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.auth-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 71, 87, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.auth-button:hover::before {
    left: 100%;
}

#forgot-password {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#forgot-password::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#forgot-password:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#forgot-password:hover::after {
    transform: scaleX(1);
}

.auth-card{
    padding: 20px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    backface-visibility: hidden;
}

.recovery-card h2,
.verification-card h2,
.auth-card h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
}

.auth-input{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.auth-input input{
    width: calc(100% - 20px);
    font-size: 1rem;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    color: #fff;
    transition: all 0.3s ease;
}
.auth-input input::placeholder{
    color: #fff;
}

.auth-input input:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.auth-input input:focus{
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.1),
        inset 0 0 10px rgba(255, 255, 255, 0.05);
    transform: translateZ(5px);
}

.login-form {
    transform: rotateY(25deg) translateZ(-100px) translateX(-50px);
}

.register-form {
    transform: rotateY(-25deg) translateZ(-100px) translateX(50px);
}

.login-form:hover {
    transform: rotateY(15deg) translateZ(50px) translateX(30px);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(25, 25, 25, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.register-form:hover {
    transform: rotateY(-15deg) translateZ(50px) translateX(-30px);
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(25, 25, 25, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Обновляем стили для карточек */
.auth-card {
    padding: 20px;
    position: relative;
    transform-style: preserve-3d;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    backface-visibility: hidden;
}

/* Стили для основной карточки */
.main-card {
    transform: translateZ(0);
}

/* Добавляем анимации для карточек */
@keyframes endpoint-recovery {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: rotateY(-25deg) translateZ(-100px) translateX(100%) translateY(-50%);
    }
}

@keyframes endpoint-verification {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translate(50%, -50%) rotateY(0deg) translateZ(-100px);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: rotateY(25deg) translateZ(-100px) translateX(-50px) translateY(-50%);
    }
}

/* Обновляем стили для карточки восстановления */
.recovery-card {
    position: absolute;
    top: 50%;
    left: 35%; /* Центрируем карточку */
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    transition: none; /* Убираем transition, будем использовать animation */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05);
}

/* Обновляем стили для карточки верификации */
.verification-card {
    position: absolute;
    top: 50%;
    left: 35%; /* Центрируем карточку */
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(-100px);
    transition: none; /* Убираем transition, будем использовать animation */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 255, 255, 0.05);
}

/* Применяем анимации при показе карточек */
.show-recovery .recovery-card {
    animation: endpoint-recovery 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.show-verification .verification-card {
    animation: endpoint-verification 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Обновляем поведение карточки восстановления при показе верификации */
.show-verification .recovery-card {
    transform: rotateY(-35deg) translateZ(-100px) translateX(50%) translateY(-50%);
}

/* Стили для кнопки "Вернуться назад" */
.back-to-login {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.back-to-login::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.back-to-login:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.back-to-login:hover::after {
    transform: scaleX(1);
}

/* Стили для кнопки "Вернуться к восстановлению" */
.back-to-recovery {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.back-to-recovery::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.back-to-recovery:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.back-to-recovery:hover::after {
    transform: scaleX(1);
}

Consigliato

Attiva/disattiva registrazione

trova un amante e un sito di incontri

Un codice di Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS