生成注册页面的显示效果
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>
.
相关推荐
这个案例主要聚焦于如何通过CSS（层叠样式表）来实现动态、吸引人的注册页面效果。下面将详细探讨相关知识点： 1. **CSS基础**：CSS是网页设计的核心技术之一，用于控制网页元素的样式、布局和呈现。在人人网注册...
例如，可以使用`background-image`属性设置背景图片，`font-family`定义字体，`padding`和`margin`调整元素间的间距，`border-radius`创建圆角效果，以及使用Flexbox或Grid进行响应式布局，确保页面在不同设备上都能...
"web登录注册页面模板150款(效果图+源码)"这个资源为前端开发者提供了一大批预设计的界面元素，帮助他们快速创建吸引人的、功能完善的登录和注册界面，节省开发时间和提高工作效率。 首先，这些模板覆盖了各种风格...
163邮箱是中国知名的电子邮件服务提供商，其注册页面是用户接触该服务的第一步，因此设计上通常注重用户体验、易用性和视觉吸引力。 在网页设计中，首先我们需要理解HTML（超文本标记语言）是构建网页内容的基础...
asp.net使用panel制作注册页面！非常简单的注册页面，没有连接数据库。没有详细的制作过程，主要是制作后的效果！可以为你制作注册页面，提供一个思路！
在本案例中，"手机APP注册页面html模板" 是专为创建手机应用程序注册页面而设计的一个模板，它利用了CSS3（层叠样式表第三版）的特性，提供了丰富的视觉效果和交互体验。 首先，我们要理解HTML（HyperText Markup ...
"jQuery实现注册页面左右滚屏效果"是一种独特的设计方法，它打破了传统的上下滚动模式，为用户带来全新的浏览体验。这种设计常见于现代网页和移动应用中，尤其是在注册或登录页面，以简洁、直观的方式展示信息。 ...
在这个主题中，"H5注册页面源码 单页源码 CSS页面 完整登录界面" 提供了一个完整的H5注册页面的源代码，这对于初学者或者开发者来说是一个很好的学习和参考资源。 首先，让我们深入理解一下H5注册页面的核心元素。...
这里我们讨论的项目是一个简单的登录注册页面，它具有良好的视觉效果和基本的用户输入验证功能。 首先，登录注册页面的核心是提供用户进行身份验证的入口。登录页面通常包括用户名（或邮箱）和密码输入框，以及登录...
这个"bootstrap登录注册页面模板.zip"文件包含了一套精心设计的登录和注册页面，可以帮助开发者节省时间，快速创建用户界面。在JavaWeb开发中，Bootstrap经常被用来提升网页的用户体验和视觉吸引力。 首先，我们来...
4. **响应式设计**：京东的登录注册页面应具备响应式布局，适应不同设备的屏幕尺寸，如手机、平板和桌面电脑。 【实现细节】 实现这个项目时，开发者可能使用了CSS3来处理样式和动画效果，比如使用`@media`查询...
在网页开发中，用户注册页面是至关重要的，它需要确保收集到的信息准确无误且安全。本教程将深入探讨如何使用jQuery这一强大的JavaScript库来实现一个功能完备的网站注册页面验证信息。jQuery使得DOM操作、事件处理...
在阿里巴巴注册页面中，`<head>`部分可能包含了网站的字符编码声明`<meta charset="UTF-8">`，确保页面内容正确显示中文字符。此外，可能会有自定义或外部链接的CSS样式表来控制页面的布局和视觉效果，以及可能的...
HTML5登陆注册页面模板是一个基于前端技术实现的交互式网页设计。...在这个模板中，用户可以在登录和注册功能...对于想要提升前端开发技能或寻找快速构建登录注册页面解决方案的人来说，这是一个很好的学习和实践案例。
【京东会员注册页面详解】 在IT行业中，网页设计与开发是一项关键技能，特别是对于电商平台而言。本示例“仿京东会员注册demo html页面”旨在帮助开发者理解和构建类似于京东的会员注册流程。这个简单的HTML文件...
【标题】"仿京东注册页面源码"是一个用于学习和实践网页开发的项目，它旨在复制京东网站的用户注册流程。这个源码包含了完整的前端界面设计以及后端数据验证功能，帮助开发者理解如何构建一个功能完备的注册系统。 ...
登录和注册页面是任何Web应用或网站的基本组成部分，它们提供了用户身份验证的入口。在这个案例中，我们讨论的是一款简洁而美观的HTML登录和注册页面，可以从17素材网站购买并下载。这样的页面设计通常注重用户体验...
【uni-app通用注册页面】是一种基于Vue.js框架的多端开发解决方案，主要应用于移动应用、微信小程序、H5页面等平台。它通过一套代码可以实现跨平台开发，大大提升了开发效率。uni-app允许开发者使用Vue.js语法进行...
首先，我们要理解登录和注册页面的设计原则。这两个页面通常是用户与网站或应用的初次接触点，因此它们应该直观、易于理解和操作。这个模板设计遵循了这些原则，以简洁的布局和清晰的元素分隔，使用户能够轻松找到...
还可以利用CSS3的过渡（transition）、动画（animation）和变形（transform）效果，为注册页面增添动态感。 另外，模板可能还包括JavaScript或jQuery的代码，以实现更复杂的交互功能，如表单验证、错误提示和提交...