css 输入框动态特效

先上图

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 输入框动效</title><style>.inputBox {position: relative;width: 250px;}.inputBox input {width: 100%;padding: 10px;border: 1px solid #cccccc;border-radius: 5px;font-size: 1em;outline: none;}.inputBox span {position: absolute;left: 0;top: 0;padding: 10px;font-size: 1em;pointer-events: none;color: #cccccc;}.inputBox input:valid ~ span,.inputBox input:focus ~ span {color: orangered;transform: translateX(10px) translateY(-7px);font-size: 0.65em;padding: 0 10px;background: #ffffff;}</style>
</head>
<body>
<div class="inputBox"><input type="text" required/><span>用户名</span>
</div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/208190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用git push太慢怎么办

使用git push太慢怎么办 修改host文件&#xff1a; windows 的路径应该在 C:\Windows\System32\drivers\etc\hosts 在host文件的最后一行加上 151.101.72.249 github.global.ssl.fastly.nethost不允许修改就复制一份&#xff0c;修改好了再替换掉&#xff0c;可能会让你输入…

【面试经典150 | 二叉树】对称二叉树

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;递归方法二&#xff1a;迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的…

【优选算法系列】【专题一双指针】第三节.611. 有效三角形的个数和LCR 179. 查找总价格为目标值的两个商品

文章目录 前言一、有效三角形的个数 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写 1.2.3 题目总结二、查找总价格为目标值的两个商品 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 …

2024山东健博会,济南健康展,5月中国大健康展,健康管理展

China-DJK山东健博会&#xff1a;5月黄金招商季&#xff0c;携千家参展商、万余款产品精彩亮相&#xff1b; DJK 2024第6届中国&#xff08;济南&#xff09;国际大健康产业博览会 The 2024 sixth China (Jinan) International Big Health Industry Expo 时间&#xff1a;2024…

Docker网络原理

Docker网络概述 1.桥接模式介绍 bridge模式是docker的默认网络模式。 桥接模式是一种用于连接两个不同网络段的设备&#xff0c;使它们能够共享通信的一种方式。 桥接设备工作在OSI模型的第二层&#xff0c;即数据链路层&#xff0c;通常基于MAC地址进行帧转发。 物理层连接…

一个简单的 postman设置接口关联让我措施了大厂的机会

postman设置接口关联 在实际的接口测试中&#xff0c;后一个接口经常需要用到前一个接口返回的结果&#xff0c; 从而让后一个接口能正常执行&#xff0c;这个过程的实现称为关联。 在postman中实现关联操作的步骤如下&#xff1a; 1、利用postman获取上一个接口指定的返回值…

YOLOv8 YoLov8l 模型输出及水果识别

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制] &#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.com/m…

关于什么是 JVM

关于什么是 JVM&#xff0c;看看普通⼈和⾼⼿的回答。 普通人 JVM 就是 Java 虚拟机&#xff0c;是⽤来运⾏我们平时所写的 Java 代码的。优点是它会 ⾃动进⾏内存管理和垃圾回收&#xff0c;缺点是⼀旦发⽣问题&#xff0c;要是不了解 JVM 的运⾏ 机制&#xff0c; 就很难…

是谁还没玩AI扩图?快跟上节奏啦

最近&#xff0c;抖音上的AI扩图突然火了&#xff0c;看完真的让人笑掉大牙&#xff5e;&#xff5e;&#xff5e; 这一热议的话题#AI扩图#在短视频平台抖音上的播放量已经突破7.8亿次&#xff0c;而相关的讨论也如同星火燎原&#xff0c;迅速点燃了公众的好奇心。从“用AI扩图…

中伟视界:皮带跑偏、异物检测AI算法除了矿山行业应用,还能在钢铁、火电、港口等行业中使用吗?

随着工业化的发展&#xff0c;皮带输送机已经成为各行业中不可或缺的重要设备&#xff0c;但是在使用过程中&#xff0c;由于各种原因&#xff0c;皮带常常出现跑偏问题&#xff0c;给生产运营带来了诸多困扰。不仅仅是矿山行业&#xff0c;钢铁、火电、港口等行业也都面临着皮…

C语言 扫雷游戏

代码在一个项目里完成&#xff0c;分成三个.c.h文件(game.c,game.h,main.c) 在Clion软件中通过运行调试。 /大概想法/ 主函数main.c里是大框架(菜单,扫雷棋盘初始化&#xff0c;随机函数生成雷&#xff0c;玩家扫雷) game.h函数声明(除main函数和游戏函数外的一些函数声明) ga…

日志打印传值 传引用 右值引用性能测试

结论 ubuntu x86平台qnx平台优化传值都是比传引用的差 但是差距很小 测试代码 #include <cstdint> #include <ctime> #include <string>#ifdef __linux__#define ITERATIONS 10000000 #else#define ITERATIONS 100000 #endiftemplate <typename... AR…

Linux设置root初始密码

目录 一、Linux系统中普通用户和特权用户&#xff08;root&#xff09; 二、Linux系统中设置root初始密码 一、Linux系统中普通用户和特权用户&#xff08;root&#xff09; windows 系统中有普通用户和特权用户&#xff0c;特权用户是 administer&#xff0c;普通用户可以…

微服务01

笔记&#xff1a; day03-微服务01 - 飞书云文档 (feishu.cn) 数据库连接不上&#xff1f; 要在虚拟机启动MySQL容器。docker start mysql 服务治理 服务提供者&#xff1a;暴露服务接口&#xff0c;供其他服务调用 服务消费者&#xff1a;调用其他服务提供的接口 注册中心&…

STL(五)(queue篇)

我发现之前一版在电脑上看 常用函数部分 没有问题,由于是手打上去的,在手机上看会发生错位问题,现已将电脑原版 常用函数部分 截图改为图片形式,不会再发生错位问题,非常感谢大家的支持 ### priority_queue优先队列出现频率非常高,尤为重要(是一定要掌握的数据结构) 1.queue队…

docker全解

docker全解 一、docker的基本概念 什么是docker? docker是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的Linux或Windows机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#…

MIT线性代数笔记-第26讲-对称矩阵及正定性

目录 26.对称矩阵及正定性打赏 26.对称矩阵及正定性 实对称矩阵的特征值均为实数&#xff0c;并且一定存在一组两两正交的特征向量 这对于单位矩阵显然成立 证明特征值均为实数&#xff1a; ​    设一个对称矩阵 A A A&#xff0c;对于 A x ⃗ λ x ⃗ A \vec{x} \lambda…

作业12.8

1. 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数。将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是…

Matlab simulink PLL学习笔记

本文学习内容&#xff1a;【官方】2022小迈步之 MATLAB助力芯片设计系列&#xff08;一&#xff09;&#xff1a;电路仿真与模数混合设计基础_哔哩哔哩_bilibili 时域模型 testbench搭建 菜单栏点击simulink 创建空白模型 点击库浏览器 在PLL里面选择一种架构拖拽到画布。 如…

一文理解什么是交叉熵损失函数以及它的作用

今天看一个在深度学习中很枯燥但很重要的概念——交叉熵损失函数。 作为一种损失函数&#xff0c;它的重要作用便是可以将“预测值”和“真实值(标签)”进行对比&#xff0c;从而输出 loss 值&#xff0c;直到 loss 值收敛&#xff0c;可以认为神经网络模型训练完成。 那么这…