Animation im Login Form

florianfinn · 24. November 2018

Hallo zusammen,

ich bin derzeit dabei ein Loginform zusammen zu basteln.

Die Loginform den ich erstellt habe, funktioniert schon, soll jetzt aber noch mit Animationen verschönert werden.

Dazu habe ich dieses Beispiel gefunden: https://colorlib.com/wp/template/login-form-v2/ und versucht, die Animationen für "Klick ins Feld und Text geht nach oben", "Klick ins Feld und Farbbalken kommt", "Hover über Submit Button und color Animation, error Message bei Falscheingabe und die Funktion für das Auge um das Passwort angezeigt zu bekommen, zu übernehmen.

Allerdings ist dort mit so viel zusätzlichen Dingen gearbeitet worden, bzw. alles so verschachtelt, dass ich dort nicht draus schlau werde, wo jetzt wie, was passiert.

Kennt sich jemand mit solchen Animationen aus und kann dahin gehend Abhilfe schaffen, oder kennt jemand ein einfacheres Template, an dem ich arbeiten und lernen kann?

Mein Loginform: https://1drv.ms/u/s!Aq2D9Z-Zax2Mgtc6d8h_FFU-CFivlQ

Oder only als Code:

Spoiler anzeigen

HTML:

HTML

<!doctype html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Monoton" rel="stylesheet">

    <title>Register</title>
    <link href="css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="login">
        <img src="teamphnxlogo.png" class="bild">
        <h2>Willkommen</h2>
        <form id="loginform">
            <p>Passwort eingeben:</p>
            <input id="password" type="password" name="pw1" placeholder="!SuPeR#SaFe1234">
            <input type="submit" name="" value="Login" onClick="login()">
        </form>
        <!-- GTA Funktion -->
        <script type="text/javascript">
        function login() {
            var password = document.getElementById("password").value;
                mp.trigger("loginPlayer", password);
            }
    
        </script>
    </div>
</body>
</html>

Alles anzeigen

CSS:

Code

body{
            margin: 0;
            padding: 0;
        }
        body:before{
            content: '';
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: transparent;
            /*
            background-image: url("4.jpeg");
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            */
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -o-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
        }
        .login
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 400px;
            height: 500px;
            padding: 80px 40px;
            box-sizing: border-box;
            background: rgba(0,0,0,.5);
            border-radius: 10px;
            border: 2px groove black;
            text-shadow: 3px 3px;
            font-family: 'Bungee';
            
        }
        .bild {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            top: calc(-80px/2);
            left: calc(50% - 40px);
        }
        .login h2 {
            margin: 0;
            padding: 0 0 20px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            font-size:200%;
        }
        .login p
        {
            margin: 0;
            padding: 0;
            font-weight: bold;
            color: #fff;
        }
        .login p1
        {
            margin: 0;
            padding: 0;
            font-weight: bold;
            color: #fff;
        }
        .login p2
        {
            margin: 0;
            padding: 0;
            font-weight: bold;
            color: #fff;
        }
        .login input
        {
            width: 100%;
            margin-bottom: 20px;
        }
        .login input[type="password"]
        {
            border: none;
            border-bottom: 1px solid #fff;
            background: transparent;
            outline: none;
            height: 40px;
            color: #fff;
            font-size: 16px;
        }
        .login input[type="submit"] {
            height: 44px;
            color: #00C7A5;
            font-size: 25px;
            background: rgba(148,101,0,1.00);
            cursor: pointer;
            border-radius: 25px;
            border: none;
            outline: none;
            margin-top: 15%;
            border: 2px groove black;
            text-shadow: 3px 3px #000000;
            font-family: 'Monoton';
        }
        .login a
        {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
        }
        input[type="checkbox"] {
            width: 20%;
        }

Alles anzeigen

Animation im Login Form

Jetzt mitmachen!

Teilen

Tags