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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL Connector/J 数据库连接 URL的语法

详情请参考&#xff1a;https://dev.mysql.com/doc/connector-j/en/connector-j-reference-jdbc-url-format.html jdbc:mysql:是用于普通的、基本的故障转移连接使用&#xff1a; jdbc:mysql://[host][,failoverhost...][:port]/[database][?propertyName1][propertyValue1]…

高德地图画渐变线

高德地图画渐变线&#xff0c;思路是将线和颜色均分为多个小线段和小颜色&#xff0c;实现渐变&#xff0c;类似于下图。 如果需要多段线&#xff0c;自己循环拼一下就可以了&#xff0c;方法返回多个小线段组成的polyline数组。 /** 高德地图画渐变线* author: liyun* params…

PHP基础 - 输入输出

在 PHP 中,有多种方法可以用来输出内容。下面是其中的几种: 1、echo: 这是最常见的输出语句之一,可以输出一个或多个字符串。它是一个语言结构,可以省略括号。使用示例如下: <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…

3.添加与删除字段

添加字段与删除字段 1.添加字段 因为甲方的业务需求是不停变化的&#xff0c;所以在数据库操作中&#xff0c;添加字段可是常有的事。一个完整的字段包括&#xff1a;字段名、数据类型和完整性约束。 语法规则为&#xff1a; ALTER TABLE 表名 ADD 新字段名 数据类型 [约束条…

解决:During handling of the above exception, another exception occurred

解决&#xff1a;During handling of the above exception, another exception occurred 文章目录 解决&#xff1a;During handling of the above exception, another exception occurred背景报错问题报错翻译报错位置代码报错原因解决方法参考内容&#xff1a;今天的分享就到…

用html+css+js做canvas烟花模拟网页动画代码

圣诞节、元旦就要到了&#xff0c;本案例我们将用htmlcssjs做canvas烟花模拟网页动画代码&#xff0c;程序员的浪漫这不就来了嘛&#xff0c;与家人朋友一起看烟花吧&#xff01; 附源码 烟花模拟器 <!-- App --> <div class"container"><div class&…

区块链创新应用场景不断拓展,实现去中心化

小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 区块…

gitee配置

注册配置gitee Gitee官网 进入官网之后&#xff0c;有账号直接登录&#xff0c;没有账号注册一个新的账号 下载安装git客户端 官网地址 下载完成&#xff0c;一路直接点击安装直接安装成功 检查是否安装成功 鼠标留在桌面–>右击–>出现Git GUI Here/Git Bash Her…

【LeetCode】每日一题 2023_12_7 出租车的最大盈利(动态规划)

文章目录 刷题前唠嗑题目&#xff1a;出租车的最大盈利题目描述代码与解题思路 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;出租车的最大盈利 题目链接&#xff1a;2008. 出租车的最大盈利 题目描述 代码与解题思路 func …

计算机网络:网络层上(数据平面)

文章目录 前言一、概述1.网络服务模型2.连接建立 二、路由器组成1.路由器结构概况输入端口的功能 2.IP&#xff08;Internet Protocol&#xff09;IPV4IPV6 3.通用转发和SDN 总结 前言 网络层分两部分讲解&#xff0c;本篇文章讲解数据平面的内容&#xff1a;路由器组成、IP协…

麻雀1号开发板开箱

麻雀1号是上海睿赛德电子科技有限公司全新推出的一款高性价比音频Wi-Fi开发板&#xff0c;内置RT-Thread&#xff0c;主打 Wi-Fi、音频和摄像头拍照功能&#xff0c;配合丰富的组件及例程&#xff0c;可降低多媒体应用的开发门槛。 开发板介绍 正面&#xff1a; 背面&#x…

目标检测mAP计算以及coco评价标准

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 讲一下目标检测中的一些常见的指标 在我们使用目标检测网络训练时 最后在验证集上会得到一个coco的评价列表 就像我们图中给的这一系列参数列表一样 我们再进一步引入两个概念 第一个叫做precisi…

DBeaver 如何在没有外网的情况下连接数据库(下载驱动)

1.选择自己要连接的数据库 2.编辑驱动 3.选择你自己通过maven或者别的渠道下载的对应数据库的jar

Python并发-线程和进程

一、线程和进程对应的问题 **1.进程&#xff1a;**CPU密集型也叫计算密集型&#xff0c;指的是系统的硬盘、内存性能相对CPU要好很多&#xff0c;此时&#xff0c;系统运作大部分的状况是CPU Loading 100%&#xff0c;CPU要读/写I/O(硬盘/内存)&#xff0c;I/O在很短的时间就可…

论文阅读《Learning Adaptive Dense Event Stereo from the Image Domain》

论文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/html/Cho_Learning_Adaptive_Dense_Event_Stereo_From_the_Image_Domain_CVPR_2023_paper.html 概述 事件相机在低光照条件下可以稳定工作&#xff0c;然而&#xff0c;基于事件相机的立体方法在域迁移时性…

人工麝香市场分析:中国市场年需求量超过15吨

人工麝香作为濒危动物药材麝香的替代品&#xff0c;等同天然麝香配方使用。 是国家重大科研成果和保密品种&#xff0c;用人工麝香生产中成药品种近400种&#xff0c;涵盖中成药常用剂型。 是珍稀动物药材代用品研究的重大突破&#xff0c;为其它珍稀动物药材的应用开辟了一条重…

案例060:基于微信小程序考试系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

深度学习还可以从如下方面进行创新!!

文章目录 一、我认为可以从如下5个方向进行创新总结 一、我认为可以从如下5个方向进行创新 新的模型结构&#xff1a;尽管现在的深度学习模型已经非常强大&#xff0c;但是还有很多未被探索的模型结构。探索新的模型结构可以带来更好的性能和更低的计算成本。 新的优化算法&a…

基于ssm家庭理财系统源码和论文

基于ssm家庭理财系统源码和论文743 idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 开发技术 ssm 摘要 随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff…

力扣面试题 08.12. 八皇后(java回溯解法)

Problem: 面试题 08.12. 八皇后 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 八皇后问题的性质可以利用回溯来解决&#xff0c;将大问题具体分解成如下待解决问题&#xff1a; 1.以棋盘的每一行为回溯的决策阶段&#xff0c;判断当前棋盘位置能否放置棋子 2.如何判…