<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { position: relative; width: 300px; border-bottom: #a6a7a7 1px solid; } #container>#username { height: 30px; width: 100%; padding: 1em 0.5em; box-sizing: border-box; border: none; outline: none; } #container>#username:valid+.line, #container>#username:focus+.line, #container>#username:hover+.line { width: 100%; } #container>#username:valid+.line+label, #container>#username:focus+.line+label, #container>#username:hover+.line+label { top: 0; transform: translateY(-100%); } #container>.line { height: 2px; width: 0; background: blue; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.3s; } #container>label { position: absolute; top: 50%; transform: translateY(-50%); left: 0.5em; transition: 0.3s; font-size: 16px; } /*# sourceMappingURL=index.css.map */ </style> </head> <body> <br> <div id="container"> <input type="text" id="username" required> <span class="line"></span> <label for="username">User Name</label> </div> </body> </html>
Css登录输入框练习
2023-08-29
39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
目录
相关文章
|
8月前
|
前端开发
|
24天前
|
PHP
|
5月前
|
3月前
|
移动开发
前端开发
JavaScript
|
4月前
|
前端开发
数据安全/隐私保护
|
5月前
|
前端开发
|
5月前
|
前端开发
程序员
|
5月前
|
前端开发
JavaScript
CSS基础详细解析(附带综合小练习)(1)
目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。
01-CSS初体验
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。
38
0
0
|
5月前
|
Web App开发
前端开发
|
5月前
|
前端开发
数据安全/隐私保护
开发者
热门文章
最新文章
1
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
2
《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
3
《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
4
前端代码整洁与规范之CSS篇
5
《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
6
Tailwind CSS如何在vue项目中使用
7
【前端设计】HTML+CSS+JavaScript基本特性
8
【掰开揉碎】详解 CSS3 Grid 布局
9
解密CSS单位：px、em、vh的区别与应用
10
CSS 中BFC是什么？