有趣的CSS - 输入框选中交互动效
页面效果
此效果主要使用 css 伪选择器配合 html5
required属性来实现一个简单的输入框的交互效果。
此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html代码
<label><input type="text" required><span>用户名</span>
</label>
页面主要使用
label与input标签，注意input中使用required属性，来判断input是否为空。
css代码
label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focus+span,input:valid+span{transform: translateY(-32px);
}
使用选择器
:hover、:foucus来获取鼠标状态，根据不同鼠标的不同状态来设置样式以及过渡效果，使用:valid来验证input值。
完整代码
html页面
<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>输入框选中交互动效</title></head><body><div class="app"><label><input type="text" required><span>用户名</span></label></div></body>
</html>
css样式
.app{width: 100%;height: 100vh;position: relative;display: flex;justify-content: center;align-items: center;
}
input{list-style: none;outline-style: none;
}
label{width: 240px;position: relative;display: flex;align-items: center;
}
input{width: 240px;height: 32px;line-height: 32px;padding: 0 10px;border: 2px solid transparent;border-bottom-color: #333;background-color: transparent;box-sizing: border-box;transition: all 0.3s;font-size: 14px;color: #333;
}
span{position: absolute;font-size: 14px;color: #999;left: 10px;cursor: text;z-index: 1;transition: all 0.3s;
}
label:hover input,input:focus{border-color: blue;border-radius: 8px;
}
input:focus+span,input:valid+span{transform: translateY(-32px);
}
页面效果
以上就是全部代码以及简单的写法思路，希望你喜欢这个交互输入框。
[1] 原文阅读
我是 Just，这里是「设计师工作日常」，求点赞求关注！！！
相关文章：
有趣的CSS - 输入框选中交互动效
页面效果 此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。 此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。 核心代码部分，简要说明了写法思路；完整代码在最后，可直…...
Unknown custom element:＜xxx＞-did you register the component correctly解决方案
如图所示控制台发现了爆红（大哭）： 报错解释： 当我们看到报错时，我们需要看到一些关键词，比如显眼的“component”和“name”这两个单词， 因此我们就从此处切入，大概与组件有关系。…...
计算机网络自顶向下Wireshark labs-HTTP
我直接翻译并在题目下面直接下我的答案了。 1.基本HTTP GET/response交互 我们开始探索HTTP，方法是下载一个非常简单的HTML文件 非常短，并且不包含嵌入的对象。执行以下操作： 启动您的浏览器。启动Wireshark数据包嗅探器，如Wir…...
解决pandas写入excel时的ValueError: All strings must be XML compatible报错
报错内容： ValueError: All strings must be XML compatible: Unicode or ASCII, no NULL bytes or control characters 报错背景 用pands批量写入excel文件，发生编码报错。检索了很多方案，都不能解决。 导致报错的原因是存在违法字符&…...
华为手表应用APP开发：watch系列 GT系列 1.配置调试设备
表开发：GT3（1）配置调试设备 初环境与设备获取手表UUID登录 AppGallery Connect 点击用户与访问初 希望能写一些简单的教程和案例分享给需要的人 鸿蒙可穿戴开发 支持外包开发：xkk9866@yeah.net 环境与设备 系统：window 设备：HUAWEI WATCH 3 Pro 开发工具：DevEco St…...
Vue（十九）：ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能
效果 原理分析 从后端获取数据后，判断当前节点是否勾选，从而判断是否勾选子节点勾选当前节点时，子节点均勾选全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑筛选出半勾选的节点定义变量 import {computed, nextTick, reactive, ref} from vue; import {tree} f…...
SpringBoot RestTemplate 设置挡板
项目结构 代码 BaffleConfig /*** Description 记录配置信息* Author wjx* Date 2024/2/1 14:47**/ public interface BaffleConfig {// 是否开启挡板的开关public static boolean SWITCH true;// 文件根目录public static String ROOT_PATH "D:\\TIS\\mock";// …...
arcgis javascript api4.x加载非公开或者私有的arcgis地图服务
需求： 加载arcgis没有公开或者私有的地图服务，同时还想实现加载时不弹出登录窗口 提示： 下述是针对独立的arcgis server，没有portal的应用场景； 如果有portal可以参考链接：https://mp.weixin.qq.com/s/W…...
2024年美赛数学建模A题思路分析 - 资源可用性和性别比例
# 1 赛题 问题A：资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外，但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1：1，但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。…...
UDP和TCP的区别和联系
传输层：定义传输数据的协议端口号，以及流控和差错校验。 协议有：TCP、UDP等 UDP和TCP的主要区别包括以下几个方面： 1、连接性与无连接性：TCP是面向连接的传输控制协议，而UDP提供无连接的数据报服务。这意…...
delete、truncate和drop区别
一、从执行速度上来说 drop > truncate >> DELETE 二、从原理上讲 1、DELETE DELETE from TABLE_NAME where xxx1.1、DELETE属于数据库DML操作语言，只删除数据不删除表的结构，会走事务，执行时会触发trigger（ 触发器…...
946. 验证栈序列
946. 验证栈序列 描述 : 给定 pushed 和 popped 两个序列，每个序列中的 值都不重复，只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时，返回 true；否则，返回 false 。 题目 : LeetCode 94…...
Linux系统管理和Shell脚本笔试题
1、写一个sed命令，修改/tmp/input.txt文件的内容，要求：(1) 删除所有空行；(2) 在非空行前面加一个"AAA"，在行尾加一个"BBB"，即将内容为11111的一行改为：AAA11111BBB #写入内…...
docker 搭建 Seafile 集成 onlyoffice
docker-compose一键部署yaml文件 version: "3"services:db:image: mariadb:10.11container_name: seafile-mysqlenvironment:- MYSQL_ROOT_PASSWORDdb_dev # Requested, set the roots password of MySQL service.- MYSQL_LOG_CONSOLEtruevolumes:- /share/ZFS18_D…...
【Spring Boot 3】【JPA】嵌入式对象
【Spring Boot 3】【JPA】嵌入式对象 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总是要花费或…...
STM32控制DS18B20温度传感器获取温度
时间记录：2024/1/28 一、DS18B20温度传感器介绍 （1）测温范围-55℃~125℃，在-10℃到85℃范围内误差为0.4 （2）返回的温度数据为16位二进制数据 （3）STM32和DS18B20通信使用单总线协议…...
服务器常遇的响应状态码
服务器常遇的响应状态码 状态码 500 表示服务器内部错误。 这种状态码意味着服务器在尝试执行请求时遇到了意外情况。在处理这种状态码时，我们需要联系服务器管理员或服务提供商以获取更多信息。 处理方法：联系服务器管理员或服务提供商以获取更多信息…...
云原生业务全流程DevOps配置预研与实践
背景 我在一个二线城市（山东济南），相对与北上广深杭这些IT业发达的城市来说，济南IT业对于业内新技术的接受度是有点慢的，国内很多一线大厂早先几年前就开始实践使用的技术，我们这边也是近两年才开始慢慢兴…...
SouthLeetCode-打卡24年01月第5周
SouthLeetCode-打卡24年01月第5周 // Date : 2024/01/39 ~ 2024/01/31 031.删除链表的倒数第 N 个结点 (1) 题目描述 031#LeetCode.19.#北岸计划2024/01/29 (2) 题解代码 Version1.0 class Solution {public ListNode removeNthFromEnd(ListNode head, int n) {if(head …...
【国产MCU】-CH32V307-通用DMA控制器及使用
通用DMA控制器及使用 文章目录 通用DMA控制器及使用1、通用DMA控制器介绍2、DMA驱动API介绍3、DMA使用实例直接存储器访问控制器（DMA）提供在外设和存储器之间或存储器和存储器之间的高速数据传输方式，无须CPU 干预，数据可以通过DMA 快速地移动，以节省CPU 的资源来做其他操…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
AI病理诊断七剑下天山，医疗未来触手可及
一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...