技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营
卡卡网是专业的网站测速平台,网速测试,测试网站速度,就来卡卡网 ~
问题反馈网络日志

【DiyVM】沙田机房/香港云/回国CN2线路/AMD EPYC/39元一月5M/CN2海外云主机 24元/月BGP+CN2海外云 低至25元/月海外主机 低至$2/月

DiyVM:香港VPS惊爆价36元一月
★站长变现★特色悬浮小图标广告
5M CN2 GIA云主机 24元起
【转化好产品,官方高价收量】
一一一云主机 26元起一一一
官方高价收量,每日稳定结算

一一云主机 24元 3折起一一
AWS核心代理U充值 免注册开户
海外CN2云 低至$2.5/月
海外云低至2折 298/年
免费测试★APK免杀 谷歌过保护
官方收量CPA/CPS长期稳定

海外主机 5M CN2 低至$2/月
恒创科技 一 海外服务器 ● 高速稳定
★解决安装报毒★谷歌过保护机制
CN2 GIA/1000Mbps $111/月
超级签★免杀★加固★满意付款
全球云主机 3天试用再买

【菠萝云】香港4G内存99元,马上开通
亿人互联-津/京BGP托管租用/VPS
苹果签名/APP封装/远控免杀
10M CN2海外云VPS 53元/月
一一站长/主播好变现一一有流量就来
站长变现 特色悬浮小图标广告

实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现

赞助商

分类目录

赞助商

最新文章

字体单位是相对测量单位,是根据其他一些值计算的,可以动态变化。与字体相关的测量单...
stroke-width设置形状的描边粗细,如果在 HTML 中,框架是从外边缘...
本文给大家介绍10款用SVG蒙版制作的图片转场/过渡动画,并分析如何实现它们。
CSS 数据类型<filter-function>代表可以改变输入图...
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个...
drop-shadow() 是一个CSS 过滤器函数,其将投影效果应用于输入图像...
本文给大家介绍一个SVG实现的网页气泡动画效果。 

搜索

纯css3实现漂亮的用户注册表单

作者:admin    时间:2021-4-18 9:43:37    浏览:953

这个用户注册表单令人眼前一亮,它充分利用Placeholder的特点,当点击输入框的时候,提示文字移到输入框左上角,用户体验非常友好,值得推荐使用,这个漂亮的用户注册表单是用纯CSS3实现的。

纯css3实现漂亮的用户注册表单
纯css3实现漂亮的用户注册表单

demodownload

CSS代码

  1. body {
  2.   align-items: center;
  3.   background-color: #000;
  4.   display: flex;
  5.   justify-content: center;
  6.   height: 100vh;
  7. }
  8.  
  9. .form {
  10.   background-color: #15172b;
  11.   border-radius: 20px;
  12.   box-sizing: border-box;
  13.   height: 500px;
  14.   padding: 20px;
  15.   width: 320px;
  16. }
  17.  
  18. .title {
  19.   color: #eee;
  20.   font-family: sans-serif;
  21.   font-size: 36px;
  22.   font-weight: 600;
  23.   margin-top: 30px;
  24. }
  25.  
  26. .subtitle {
  27.   color: #eee;
  28.   font-family: sans-serif;
  29.   font-size: 16px;
  30.   font-weight: 600;
  31.   margin-top: 10px;
  32. }
  33.  
  34. .input-container {
  35.   height: 50px;
  36.   position: relative;
  37.   width: 100%;
  38. }
  39.  
  40. .ic1 {
  41.   margin-top: 40px;
  42. }
  43.  
  44. .ic2 {
  45.   margin-top: 30px;
  46. }
  47.  
  48. .input {
  49.   background-color: #303245;
  50.   border-radius: 12px;
  51.   border: 0;
  52.   box-sizing: border-box;
  53.   color: #eee;
  54.   font-size: 18px;
  55.   height: 100%;
  56.   outline: 0;
  57.   padding: 4px 20px 0;
  58.   width: 100%;
  59. }
  60.  
  61. .cut {
  62.   background-color: #15172b;
  63.   border-radius: 10px;
  64.   height: 20px;
  65.   left: 20px;
  66.   position: absolute;
  67.   top: -20px;
  68.   transform: translateY(0);
  69.   transition: transform 200ms;
  70.   width: 76px;
  71. }
  72.  
  73. .cut-short {
  74.   width: 50px;
  75. }
  76.  
  77. .input:focus ~ .cut,
  78. .input:not(:placeholder-shown) ~ .cut {
  79.   transform: translateY(8px);
  80. }
  81.  
  82. .placeholder {
  83.   color: #65657b;
  84.   font-family: sans-serif;
  85.   left: 20px;
  86.   line-height: 14px;
  87.   pointer-events: none;
  88.   position: absolute;
  89.   transform-origin: 0 50%;
  90.   transition: transform 200ms, color 200ms;
  91.   top: 20px;
  92. }
  93.  
  94. .input:focus ~ .placeholder,
  95. .input:not(:placeholder-shown) ~ .placeholder {
  96.   transform: translateY(-30px) translateX(10px) scale(0.75);
  97. }
  98.  
  99. .input:not(:placeholder-shown) ~ .placeholder {
  100.   color: #808097;
  101. }
  102.  
  103. .input:focus ~ .placeholder {
  104.   color: #dc2f55;
  105. }
  106.  
  107. .submit {
  108.   background-color: #08d;
  109.   border-radius: 12px;
  110.   border: 0;
  111.   box-sizing: border-box;
  112.   color: #eee;
  113.   cursor: pointer;
  114.   font-size: 18px;
  115.   height: 50px;
  116.   margin-top: 38px;
  117.   // outline: 0;
  118.   text-align: center;
  119.   width: 100%;
  120. }
  121.  
  122. .submit:active {
  123.   background-color: #06b;
  124. }

HTML代码

  1. <div class="form">
  2.  
  3.       <div class="title">欢迎光临</div>
  4.   
  5.       <div class="subtitle">让我们创建您的帐户!</div>
  6.   
  7.       <div class="input-container ic1">
  8.         <input id="firstname" class="input" type="text" placeholder=" " />
  9.         <div class="cut"></div>
  10.         <label for="用户名" class="placeholder">用户名</label>
  11.       </div>
  12.   
  13.       <div class="input-container ic2">
  14.         <input id="lastname" class="input" type="text" placeholder=" " />
  15.         <div class="cut"></div>
  16.         <label for="名称" class="placeholder">名称</label>
  17.       </div>
  18.   
  19.       <div class="input-container ic2">
  20.         <input id="email" class="input" type="text" placeholder=" " />
  21.         <div class="cut cut-short"></div>
  22.         <label for="邮箱" class="placeholder">邮箱</label>
  23.       </div>
  24.   
  25.       <button type="text" class="submit">提交</button>
  26.   
  27. </div>

execcodegetcode

代码解释

1、如下CSS代码比较不多见,是本表单的关键代码。

  1. .input:focus ~ .cut,
  2. .input:not(:placeholder-shown) ~ .cut {
  3.   transform: translateY(8px);
  4. }

.input:focus 表示获得焦点的输入字段。

兄弟选择器('~')表示在某元素之后的所有兄弟元素,不一定要紧跟在后面,但必须得是相同父元素,即必须是同一级元素。

.input:not(:placeholder-shown) ~ 表示标签选择器不适用于自动填充。

transform: translateY() Transform字面上就是变形,改变的意思。translateY(Y)仅垂直方向移动(Y轴移动)。

2、pointer-events: none; 属性

在CSS代码里,看到.placeholder的属性包含pointer-events: none; ,这里说说这个属性。

  1. .placeholder {
  2.   color: #65657b;
  3.   font-family: sans-serif;
  4.   left: 20px;
  5.   line-height: 14px;
  6.   pointer-events: none;
  7.   position: absolute;
  8.   transform-origin: 0 50%;
  9.   transition: transform 200ms, color 200ms;
  10.   top: 20px;
  11. }

这个pointer-events属性none值能阻止点击、状态变化和鼠标指针变化。

一些需要注意的关于pointer-events的事项:

  • 子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
  • 如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。

pointer-events属性是用来禁止某元素的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉。

您可能对以下文章也感兴趣

标签: Placeholder  注册表单  
x
广告: 【限时】云主机 24元/月