VideLoginForm案例

Posted sspofa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VideLoginForm案例相关的知识,希望对你有一定的参考价值。

VideLoginForm案例

技术图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body data-vide-bg="video1.mp4" data-vide-options="posterType: mp4, loop: false, muted: true, position: 0% 0%">
    <div class="login-form">
        <h2>Sing In</h2>
        <div class="form-input">
            <input type="text" name="" placeholder="Email">
        </div>
        <div class="form-input">
            <input type="password" name="" placeholder="password">
        </div>
        <div class="form-input">
            <input type="submit" name="" value="Login">
        </div>
        <a href="#" class="forget">Forget Password</a>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="jquery.vide.js"></script>
</body>

</html>
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    /* background: #000; */
    font-family: sans-serif;
}

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 300px;
    padding: 60px 40px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 15px 20px rgba(0, 0, 0, .2);
}

.login-form h2 {
    margin: 0 0 40px;
    padding: 0;
    text-align: center;
}

.login-form .form-input {
    position: relative;
    margin: 20px 0;
}

.login-form .form-input input {
    outline: none;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .5);
    background: transparent;
    font-size: 18px;
}

.login-form .form-input input[type="submit"] {
    background: #e91e63;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.login-form .form-input input[type="submit"]:hover {
    background: #0090ff;
}

.login-form .forget {
    display: block;
    margin-top: 30px;
    color: #000;
    font-weight: bold;
}

以上是关于VideLoginForm案例的主要内容,如果未能解决你的问题,请参考以下文章

在案例演示中嵌入片段

java开发的项目案例,大厂内部资料

将数据从Activity发送到Fragment - 如何?

14.VisualVM使用详解15.VisualVM堆查看器使用的内存不足19.class文件--文件结构--魔数20.文件结构--常量池21.文件结构访问标志(2个字节)22.类加载机制概(代码片段

微信小程序开发之--"template模板“的应用

详细实例说明+典型案例实现 对动态规划法进行全面分析 | C++