css设置注册表单,纯CSS实现的步骤引导用户注册表单

最新推荐文章于 2024-05-10 22:15:29 发布
最新推荐文章于 2024-05-10 22:15:29 发布
阅读量384 收藏
点赞数
文章标签： css设置注册表单

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline;

}

html {

line-height: 1;

}

ol,

ul {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption,

th,

td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

q,

blockquote {

quotes: none;

}

q:before,

q:after,

blockquote:before,

blockquote:after {

content: "";

content: none;

}

a img {

border: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

body {

font-family: "Open Sans", sans-serif;

font-size: 16px;

text-align: center;

color: #444;

background: #d0d0d0;

}

header {

margin-bottom: 2em;

}

h1 {

font-size: 2em;

margin: 2em 0 1em;

}

strong {

font-weight: 700;

}

p {

line-height: 1.4em;

}

article header {

margin: 0;

}

.full-height {

height: 26em;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.flexy-item {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

position: relative;

}

.flexy-column {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.flexy-column.reverse {

-webkit-box-orient: vertical;

-webkit-box-direction: reverse;

-webkit-flex-direction: column-reverse;

-ms-flex-direction: column-reverse;

flex-direction: column-reverse;

}

.flexy-item_child {

-webkit-box-flex: 1;

-webkit-flex: 1 0 100%;

-ms-flex: 1 0 100%;

flex: 1 0 100%;

}

.pure-steps {

display: inline-block;

width: 20em;

color: white;

margin-bottom: 3em;

}

.pure-steps strong {

color: #b2ff41;

font-weight: 300;

}

.pure-steps .pure-steps_group {

position: relative;

min-height: 26em;

border-radius: 0.4em;

overflow: hidden;

box-shadow: 0 1.7em 5.5em -0.94em rgba(0, 0, 0, 0.3), 0 2em 3em 0.5em rgba(0, 0, 0, 0.1), 0 1.8em 2em -1.5em rgba(0, 0, 0, 0.2);

background-image: -webkit-linear-gradient(210deg, #26e289 0%, #1a5fa2 100%, #f00 200%);

background-image: linear-gradient(-120deg, #26e289 0%, #1a5fa2 100%, #f00 200%);

background-position: 0 0;

background-size: 300%;

will-change: background, box-shadow;

-webkit-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

.pure-steps .pure-steps_group .pure-steps_group-step {

position: absolute;

left: 0;

top: 0;

width: 100%;

-webkit-transform: translate(100%);

transform: translate(100%);

opacity: 0;

will-change: transform, opacity;

-webkit-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

text-align: left;

}

.pure-steps .pure-steps_group .pure-steps_group-step:last-child {

text-align: center;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_legend {

font-size: 1.5em;

font-weight: 700;

padding: 1.5em 1.34em 1em;

line-height: 1em;

position: relative;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item {

padding: 0 2em 1em;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item label {

font-size: 0.8em;

display: block;

opacity: 0.6;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input {

font-size: 1em;

box-sizing: border-box;

width: 100%;

border: 0;

line-height: 1.5em;

background-color: transparent;

background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #e5e5e5 1px), -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #b2ff41 1px);

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #e5e5e5 1px), linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #b2ff41 1px);

background-size: 100% 1px, 0% 1px;

background-repeat: no-repeat;

outline: none;

will-change: background;

-webkit-transition: background 0.3s ease-in-out;

transition: background 0.3s ease-in-out;

color: white;

font-family: "Open Sans", sans-serif;

font-weight: 300;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus {

color: white;

background-size: 0% 1px, 100% 1px;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus + label {

opacity: 1;

color: #b2ff41;

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-webkit-input-placeholder {

color: rgba(255, 255, 255, 0.6);

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-moz-placeholder {

color: rgba(255, 255, 255, 0.6);

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-moz-placeholder {

color: rgba(255, 255, 255, 0.6);

}

.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-ms-input-placeholder {

color: rgba(255, 255, 255, 0.6);

}

.pure-steps .pure-steps_radio {

display: none;

}

.pure-steps .pure-steps_group-triggers {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 3.6em;

border-radius: 0 0 0.4em 0.4em;

background-color: rgba(0, 0, 0, 0.1);

will-change: opacity;

-webkit-transition: opacity 0.3s ease-in-out;

transition: opacity 0.3s ease-in-out;

}

.pure-steps .pure-steps_group-triggers:before {

content: '';

display: inline-block;

position: absolute;

left: 0;

width: 0%;

height: 0.1em;

background: rgba(178, 255, 65, 0.4);

will-change: width;

-webkit-transition: width 0.6s ease-in-out;

transition: width 0.6s ease-in-out;

}

.pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item {

display: none;

}

.pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item label {

display: block;

padding: 1.2em;

color: white;

}

.pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group {

background-position: 25% 0;

}

.pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-triggers:before {

width: 33.333%;

}

.pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(2) {

display: block;

}

.pure-steps .pure-steps_radio:nth-child(1):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(1) {

opacity: 1;

-webkit-transform: translate(0);

transform: translate(0);

}

.pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group {

background-position: 50% 0;

}

.pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-triggers:before {

width: 66.666%;

}

.pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(3) {

display: block;

}

.pure-steps .pure-steps_radio:nth-child(2):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(2) {

opacity: 1;

-webkit-transform: translate(0);

transform: translate(0);

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group {

background-position: 75% 0;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers {

opacity: 0;

-webkit-transition-delay: 0.6s;

transition-delay: 0.6s;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100%;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload {

display: block;

height: 0.1em;

width: 100%;

box-sizing: border-box;

margin: 0 2em;

background-image: -webkit-linear-gradient(90deg, rgba(255, 59, 153, 0.4) 0%, rgba(255, 157, 0, 0.4) 50%, rgba(178, 255, 65, 0.4) 100%);

background-image: linear-gradient(0deg, rgba(255, 59, 153, 0.4) 0%, rgba(255, 157, 0, 0.4) 50%, rgba(178, 255, 65, 0.4) 100%);

background-size: 0 10em;

background-position: top center;

background-repeat: no-repeat;

will-change: background-image;

-webkit-transition: background-image 3s linear;

transition: background-image 3s linear;

-webkit-animation: preloadLine 3s ease-out forwards;

animation: preloadLine 3s ease-out forwards;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload svg {

font-size: 1.2em;

width: auto;

height: 1em;

padding: 1em;

border-radius: 2em;

background-color: #5bd670;

fill: white;

margin-top: -1.5em;

-webkit-transform: scale(0);

transform: scale(0);

-webkit-animation: preloadTic 0.8s linear forwards;

animation: preloadTic 0.8s linear forwards;

-webkit-animation-delay: 3s;

animation-delay: 3s;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers:before {

width: 99.999%;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(4) {

display: block;

}

.pure-steps .pure-steps_radio:nth-child(3):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(3) {

opacity: 1;

-webkit-transform: translate(0);

transform: translate(0);

}

@-webkit-keyframes preloadLine {

0% {

background-position: bottom center;

background-size: 0 10em;

}

100% {

background-position: top center;

background-size: 100% 10em;

}

}

@keyframes preloadLine {

0% {

background-position: bottom center;

background-size: 0 10em;

}

100% {

background-position: top center;

background-size: 100% 10em;

}

}

@-webkit-keyframes preloadTic {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

20% {

-webkit-transform: scale(0.2);

transform: scale(0.2);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: scale(1.3);

transform: scale(1.3);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

65% {

-webkit-transform: scale(0.9);

transform: scale(0.9);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80%,

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes preloadTic {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

20% {

-webkit-transform: scale(0.2);

transform: scale(0.2);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: scale(1.3);

transform: scale(1.3);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

65% {

-webkit-transform: scale(0.9);

transform: scale(0.9);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80%,

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

Screwberry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
9款大气实用的HTML5/CSS3注册登录表单
yanyiping992的博客
11-25 2167
注册和登录基本上是每一个网站都会有的功能，那么如何让用户在注册和登录这个环节上有更好的用户体验呢？随着现代浏览器的发展，我们就可以用HTML5和CSS3来制作炫酷的注册登录表单，下面我们收集了9款大气实用的HTML5/CSS3注册登录表单，希望你会喜欢。1、HTML5/CSS3仿Facebook登录表单利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CS...
css在文字中间插入下划线,CSS实现文字自定义下划线
weixin_42635849的博客
08-03 2478
尽管CSS有一个下划线属性text-decoration: underline，但这个属性非常简陋而且不能修改效果。解决方案一使用border属性{border-bottom: 1px solid gray;text-decoration: none;}使用border-bottom模拟出来的下划线可以自定义颜色、线条宽度和线的形状。但是线与字之间的距离或者说空隙很大如果设置比较小的line-he...
【HTML CSS JS】耗时一下午，整理出了一个精美的响应式登陆注册表单（附源码）_源码 响应式登录页面
最新发布
2401_84616088的博客
05-10 933
400;500;600;700;margin: 0;left: 50%;width: 45%;top: 0;left: 0;form {
html和css制作qq号码申请页面
thels_的博客
10-27 964
【代码】html和css制作qq号码申请页面。
用css写一个登录注册页面
weixin_42610010的博客
02-07 341
如果你想用CSS来创建一个登录注册页面，那么你需要先学习一些CSS的基础知识。首先，你需要了解HTML的布局方式，然后再学习如何使用CSS来设计页面的样式。 接下来，你可以使用CSS的各种样式属性来设计登录注册页面的布局。例如，你可以使用CSS的定位属性来设置元素的位置，使用CSS的颜色属性来设置元素的颜色，使用CSS的字体属性来设置元素的字体等。 最后，你可以使用CSS的媒体查询来设计登录注册页...
纯css实现登录表单动效
大白兔奶糖的博客
08-03 1563
【代码】纯css实现登录表单动效。
html5+css3实现一款注册表单实例
09-28
注册表单采用html5+css3布局实现，效果相当不错，感兴趣的前端web设计者可以参考下哈，希望可以帮助到你
css3实现一款模仿iphone样式的注册表单
09-25
在本文中，我们将探讨如何使用CSS3来创建一个模仿iPhone样式的注册表单。通过学习和实践这些技术，你可以为你的网站添加一个吸引人的、具有交互性的用户界面元素。 首先，我们从HTML结构开始。一个典型的注册表单...
CSS3登录注册表单滑动切换特效
06-24
"CSS3登录注册表单滑动切换特效"就是这样一个旨在优化用户界面的技巧，它利用了CSS3的特性来实现平滑、流畅的表单切换效果。这种特效使得登录和注册功能在同一界面下无缝过渡，减少了用户操作步骤，提高了页面的可用...
css3用户体验注册表单.rar_css3用户体验注册表单_platewld
09-23
css3用户体验注册表单不错代码可以学习的
CSS优美PHP登陆表单
好
08-16 783
Form demo <!-- body { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background:#fff; text-align:center; } * { margin:0; padding:0; } a { color:#1E7ACE; text-decoration:non
Html+CSS实现简单的注册表单
热门推荐
mohen110的博客
09-17 1万+
这次和大家分享一个用html语言实现的一个简单的注册表单,豪华升级版在文末的链接,感兴趣的可以点击浏览. 来, 先看预览 预览 在这里呢,我们将html和css分开编写 html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>程序员阿菜</title> </head> <body> <div class...
HTML5+CSS：02用户注册表单
Yummy的博客
11-05 736
新的学期已开始接近两个月了，好久没有来更新博客（>_<)有点小偷懒了，不过，学习还是不能落下的，今写一个有点实践运用的关于表单网页的代码，希望能够帮助到跟我一样H5的小白们，也请各位大佬多多指教！！ 首先，先上我们敲的表单样式（如下）： 其次，代码接上吖，Html5代码如下： <!DOCTYPE html> <html> <head...
HTML 会员注册 及CSS部分介绍
m0_67947369的博客
05-03 2350
根据自己的需求调整样式，我的仅仅调了文字大小和背景图，以及图片的位置 （其他效果可以查阅资料，祝大家做出自己满意的效果图）url（）括号里面可以放自己图片当作背景，网址或者文件（文件需要注意路径）我这个代码使用的内部样式表 内部样式表是放在head标签中的，如图。CSS有三种样式表 分别为外部样式表 内部样式表以及行内样式表。
HTML和CSS分别实现注册页面表单
言兼小师傅的博客
04-10 3051
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML注册页面</title> </head> <body> <form action="#" method="post"> <table border="1" align="center" width="500px"> .
使用CSS完成用户注册页面；
Syntacticsugar's blog
09-19 6437
    使用CSS完成用户注册页面； 做成这样一个页面； ①设置body的background-image背景图【该背景图是全铺方式，个别网页注册采用指定位置background-position定位背景图在真个页面的位置】； ②分成一个div,分装left ，mid，right 这三部分，mid中使用一个div来装table（以便于调节table在页面的布局或者定位） ， 最外部...
前端：CSS基础知识
lllwky的博客
08-07 2019
CSS基础 一：什么是CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 注：查找CSS样式的网站： CSS样式菜鸟教程 二：选择器 1：idea新建CSS目录样式
CSS页面优化构建一个注册页面
m0_71467744的博客
09-19 1761
1.首先是给整个页面插入一张背景图；在标签中写一个标签，用body{}选择器插入一张图片设置大小占整个布局的全部，3.后面就是继续定义内层div写如注册内容，其中内层涉及到了浮动，需要设置整个页面在浮动后大小不变需要设置：box-sizing: border-box;需要设置一下其背景颜色为白色，以及边框大小和颜色，设置好后，继续调整一下表格与在整个页面的位置。4.其余就是根据对应的class或者id设置字体大小、颜色以及位置。
CSS注册表单
qq_30906791的博客
11-03 687
表单 表单中包含了按钮，输入框等内容，所以以表单为主题，统一学习这所有的样式
html5css表单用户注册
10-28
HTML5和CSS3为表单验证带来了新特性，使得用户注册表单页更加方便和易于使用。在HTML5中，可以使用新的input类型，例如email、tel、url等，以及新的属性，例如required、pattern等，来验证用户输入的数据。在CSS3中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值