注册页面效果

编程语言 2018-05-09 14:49:51 阅读次数: 2

生成注册页面的显示效果

 1.动态背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
        @import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-weight: 300;
        }

        html, body {
            height: 100%;
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            font-weight: 300;
        }

        .wrapper {
            height: 100%;
            background: #50a3a2;
            width: 100%;
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#50a3a2), to(#53e3a6));
            background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            opacity: .8;
            position: absolute;
            top: 0;
            left: 0;
        }

        .wrapper.form-success .container h1 {
            -webkit-transform: translateY(80px);
            -moz-transform: translateY(80px);
            -ms-transform: translateY(80px);
            -o-transform: translateY(80px);
            transform: translateY(80px);
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 80px 0;
            height: 400px;
            text-align: center;
        }

        .container h1 {
            font-size: 40px;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            font-weight: 200;
        }

        form {
            padding: 20px 0;
            position: relative;
            z-index: 2;
        }

        form input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            border: 1px solid rgba(255, 255, 255, .4);
            color: #fff;
            font-size: 18px;
            background: rgba(255, 255, 255, .2);
            width: 250px;
            border-radius: 5px;
            padding: 10px 15px;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            -webkit-transition-duration: .25s;
            -moz-transition-duration: .25s;
            -ms-transition-duration: .25s;
            -o-transition-duration: .25s;
            transition-duration: .25s;
        }

        form input:hover {
            background: rgba(255, 255, 255, .4);
        }

        form input:focus {
            backgorund-color: #fff;
            width: 300px;
            color: #53e3a6;
        }

        form button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            background: #fff;
            border: 0;
            padding: 10px 15px;
            color: #53e3a6;
            width: 250px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            -webkit-transition-duration: .25s;
            -moz-transition-duration: .25s;
            -ms-transition-duration: .25s;
            -o-transition-duration: .25s;
            transition-duration: .25s;
        }

        form button:hover {
            background-color: #f5f7f9;
        }

        .bg-bubbles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
        }

        .bg-bubbles li {
            position: absolute;
            display: block;
            list-style: none;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, .15);
            bottom: -160px;
            -webkit-animation: square 25s infinite;
            animation: square 25s infinite;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
        }

        .bg-bubbles li:nth-child(1) {
            left: 10%;
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
            -o-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-transition-duration: 17s;
            -moz-transition-duration: 17s;
            -ms-transition-duration: 17s;
            -o-transition-duration: 17s;
            transition-duration: 17s;
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            -webkit-transition-duration: 22s;
            -moz-transition-duration: 22s;
            -ms-transition-duration: 22s;
            -o-transition-duration: 22s;
            transition-duration: 22s;
            background-color: rgba(255, 255, 255, .25);
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%;
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
            background-color: rgba(255, 255, 255, 0.2);
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            -webkit-animation-delay: 7s;
            animation-delay: 7s;
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            -webkit-animation-delay: 15s;
            animation-delay: 15s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
            -webkit-animation-duration: 40s;
            animation-duration: 40s;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .bg-bubbles li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            -webkit-animation-delay: 11s;
            animation-delay: 11s;
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-1000px) rotate(600deg);
                transform: translateY(-1000px) rotate(600deg);
            }
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }
            100% {
                -webkit-transform: translateY(-1000px) rotate(600deg);
                transform: translateY(-1000px) rotate(600deg);
            }
        }


    </style>
</head>
<body>
<div class="main-container">
    <div class="wrapper">
        <div class="container">
            <h1>Welcome</h1>
            <form action="" class="form">
                <input type="text" required="required" placeholder="UserName">
                <input type="password" required="required" placeholder="PassWord">
                <button id="reg-btn" type="submit">Register</button>
            </form>
        </div>
        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

</body>
</html>

2.动态密码特效（捂眼睛）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style type="text/css">
        /*CSS源代码*/
        body {
            font: 16px/1.5 'STHeiti-Light', 'STXihei', 'HelveticaNeue', 'Helvetica', 'Simsun', Sans-serif;
            background: #F1F0F6;
            color: #333;
            -webkit-text-size-adjust: none;
            width: 100%;
            height: 100%;
            min-width: 320px;
            min-height: 480px;
            padding: 0px 0 10px 0
        }

        .it-box {
            display: -webkit-box;
            background-color: #FFF;
            font-size: 16px;
            position: relative
        }

        .it-text-list {
            width: 100%;
            height: 42px;
            background-color: #FFF;
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0));
            background-repeat: repeat-x;
            background-position: left top;
            background-size: 100% 1px;
            text-align: right
        }

        .it-text-bottom {
            width: 100%;
            height: 42px;
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0));
            background-repeat: repeat-x;
            background-position: left top, left bottom;
            background-size: 100% 1px;
            text-align: right
        }

        .it-text-list .it-label {
            margin-left: 18px;
            min-width: 30px;
            margin-right: 10px;
            height: 42px;
            text-align: left;
            line-height: 42px
        }

        .it-text-list .it-line {
            margin-left: 18px;
            min-width: 20px;
            height: 42px;
            text-align: left;
            line-height: 42px;
            -webkit-box-flex: 1;
        }

        .it-text-list .it-input {
            position: relative;
            -webkit-box-flex: 1.0;
            margin-right: 18px;
            height: 40px;
            line-height: 40px;
            padding: 1px 0
        }

        .it-text-list .it-input input, .it-text-list .it-input .input {
            position: absolute;
            top: 1px;
            bottom: 0;
            right: 0;
            text-align: right;
            border: 0;
            width: 100%;
            background-color: #FFF
        }

        .cn-buttons {
            padding: 0 18px 0 18px;
            height: 43px;
            margin: 10px 0;
        }

        .cn-buttons .button {
            display: block;
            margin: auto;
            height: 41px;
            border-radius: 3px;
            text-align: center;
            line-height: 41px;
            font-size: 16px;
        }

        .cn-buttons .button a {
            display: inline-block;
            width: 100%;
            height: 100%;
            color: inherit
        }

        .cn-buttons .bt-red {
            background-color: #DF3031;
            color: #FFF;
            border: 1px solid #DF3031
        }

        .cn-buttons .bt-white {
            background-color: #FFF;
            border: 1px solid #CCC
        }

        .login-form {
            position: relative;
            display: block;
            margin: 180px 18px 30px;
            border-radius: 10px;
            box-shadow: 0 3px 5px #DDD;
            background: #FFF
        }

        .login-form .it-text-list {
            background-image: none;
        }

        .login-form .it-text-bottom {
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #E0E0E0), to(#E0E0E0))
        }

        .login-form .cartoon {
            position: absolute;
            top: -110px;
            left: 50%;
            margin-left: -77px;
            width: 155px;
            height: 110px;
            background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-head.png") no-repeat center center;
            background-size: 155px;
        }

        .login-form .cartoon .hand-left {
            position: absolute;
            left: -10px;
            bottom: -50px;
            width: 37px;
            height: 50px;
            background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-left.png") no-repeat center center;
            background-size: 37px;
        }

        .login-form .cartoon .hand-right {
            position: absolute;
            right: -10px;
            bottom: -50px;
            width: 37px;
            height: 50px;
            background: url("http://xfw8.sinaapp.com/webapp/static/mobile/image/cartoon-hand-right.png") no-repeat center center;
            background-size: 37px;
        }

        .login-form .cartoon .hand {
            position: absolute;
            z-index: 1;
            top: -10px;
            right: 0;
            width: 25px;
            height: 15px;
            background: #FCC4A9;
            border-radius: 100%;
        }

        .login-form .cartoon .hand-right .hand {
            right: auto;
            left: 0;
        }

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<form id="login-form" class="login-form">
    <div class="cartoon">
        <div id="handLeft" class="hand-left">
            <div class="hand"></div>
        </div>
        <div id="handRight" class="hand-right">
            <div class="hand"></div>
        </div>
    </div>
    <div class="it-text-list it-box">
        <div class="it-label">账号</div>
        <div class="it-input">
            <input type="text" placeholder="请输入注册手机号" name="phoneNum" id="phoneNum">
        </div>
    </div>
    <div class="it-text-list it-text-bottom it-box">
        <div class="it-label">密码</div>
        <div class="it-input">
            <input type="password" placeholder="请输入密码" name="password" id="password">
        </div>
    </div>
</form>
<div class="cn-buttons">
    <div class="button bt-red">登录</div>
</div>

<div class="cn-buttons">
    <div class="button bt-white">注册</div>
</div>


<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(".it-input input[type=password]").on("focus", function () {
        $(".hand").hide();
        $("#handLeft").animate({bottom: 0, left: 10});
        $("#handRight").animate({bottom: 0, right: 10});
    }).on("blur", function () {
        $("#handLeft").animate({bottom: -50, left: -10});
        $("#handRight").animate({bottom: -50, right: -10}, function () {
            $(".hand").show();
        });
    });
</script>
</body>
</html>

.

猜你喜欢

转载自570109268.iteye.com/blog/2409297
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022