如何制作鼠标悬浮后伸缩的搜索框

引言

许多博客都在使用的伸缩搜索框制作教程

成品展示(颜色自行搭配)

22222

初步布局

居中盒子&&初始化样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 初步布局 */body {margin: 0;background: linear-gradient(200deg, #f1b2ff, #ff80c6);height: 100vh;}.search-box {position: absolute;top: 50%;left: 50%;background: #fff;}</style>
</head><body><div class="search-box">box</div>
</body></html>
image-20240629173919921

1形态

盒子中间填入input和a标签作为按钮背景色为白色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* 初步布局 */margin: 0;background: linear-gradient(200deg, #f1b2ff, #ff80c6);height: 100vh;}/* 居中设置背景色 */.search-box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;}</style>
</head><body><div class="search-box" class="search-input"><input type="text"><a href="" class="search-btn">按钮</a></div>
</body></html>
image-20240629174703859

2形态

让外盒子box变得更胖更圆润

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* 初步布局 */margin: 0;background: linear-gradient(200deg, #f1b2ff, #ff80c6);height: 100vh;}.search-box {/* 居中设置背景色 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;/* 让他变胖变圆润一点 */height: 40px;padding: 10px;border-radius: 40px;}</style>
</head><body><div class="search-box"><input type="text" class="search-input"><a href="" class="search-btn">按钮</a></div>
</body></html>
image-20240629181256197

3形态

初始化输入框/按钮的样式和引入图标,将input一开始状态设置为width 0

文字标签换成图标

  1. 引入cdn

  2. 设置标签

输入框居中

设置input输入框自带的内边距为0,边框和轮廓为none

内部文字为16px 行高和父盒子一样40px

(从父盒子的Y起始点和结束点平均增加上下间距,也就是把文字往中间挤压,使得最后input输入框的整体高度和父盒子高度一致,实现输入框文字居中, 直接这样记,行高=盒高为文字居中,且一行的上下边距会将文字挤到中间)

image-20240629181030099

按钮样式

由于按钮是行内元素,想要设置宽高是无效的,让他往右漂浮,此时宽高生效

使用弹性布局将i标签水平横向居中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>body {/* 初步布局 */margin: 0;background: linear-gradient(200deg, #f1b2ff, #ff80c6);height: 100vh;}.search-box {/* 居中设置背景色 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;/* 让他变胖变圆润一点 */height: 40px;padding: 10px;border-radius: 40px;}.search-input {padding: 0;border: none;outline: none;font-size: 16px;line-height: 40px;width: 0;}.search-btn {width: 40px;height: 40px;border-radius: 50%;float: right;display: flex;justify-content: center;align-items: center;cursor: pointer;}</style>
</head><body><div class="search-box"><input type="text" class="search-input" placeholder="请输入内容"><a class="search-btn"><i class="fa fa-search"></i></a></div>
</body></html>

image-20240629184717610

4形态

悬浮或点击时box大盒子时 input宽度200px,按钮背景色变化,分别增加transition过渡0.4s

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>body {/* 初步布局 */margin: 0;background: linear-gradient(200deg, #f1b2ff, #ff80c6);height: 100vh;}.search-box {/* 居中设置背景色 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;/* 让他变胖变圆润一点 */height: 40px;padding: 10px;border-radius: 40px;}.search-input {padding: 0;border: none;outline: none;font-size: 16px;line-height: 40px;width: 0;transition: 0.4s;}.search-btn {width: 40px;height: 40px;border-radius: 50%;float: right;display: flex;justify-content: center;align-items: center;cursor: pointer;transition: 0.4s;}.search-box:hover .search-input {width: 200px;}.search-box:hover .search-btn {background: #b05824;}</style>
</head><body><div class="search-box"><input type="text" class="search-input" placeholder="请输入内容"><a class="search-btn"><i class="fa fa-search"></i></a></div>
</body></html>

注意事项

a标签的跳转连接href 得去掉,否则图标会变成这样

image-20240629185308097

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

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

相关文章

2SK241 LTSpice模型及仿真

2SK241是东芝生产的一款NMOS&#xff0c;早已停产&#xff0c;但是在收音机圈子里还是有很多死忠粉&#xff0c;所以在淘宝上也是一堆打磨改标的假货。 言归正传&#xff0c;在矿坛上找到了2SK241的模型&#xff1a; .model M2SK241bottom NMOS(Level1 Rd1 Rs10 Rg50 Kp8mV…

在高并发场景下,怎样避免 PostgreSQL 的死锁问题?

文章目录 &#xff08;一&#xff09;不当的事务设计&#xff08;二&#xff09;不正确的锁使用&#xff08;三&#xff09;并发操作冲突&#xff08;一&#xff09;优化事务设计&#xff08;二&#xff09;正确使用锁&#xff08;三&#xff09;调整数据库参数&#xff08;四&…

mindspore打卡第9天 transformer的encoder和decoder部分

mindspore打卡第9天 transformer的encoder和decoder部分 import mindspore from mindspore import nn from mindspore import ops from mindspore import Tensor from mindspore import dtype as mstypeclass ScaledDotProductAttention(nn.Cell):def __init__(self, dropout_…

2024年6月29日 (周六) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 喜马拉雅下载工具: 字面意思 《星刃》性感女主私密部位细节逼真 让玩家感到惊讶《星刃…

clion ctrl+左键只能跳转到虚函数的声明处

右击函数 -> GOTO -> Definition 这样不够便捷&#xff0c;但是我没有找到更好的办法 可能是因为该函数是虚函数的重写&#xff0c;clion 无法识别出该函数是虚函数的哪个重写版&#xff0c;只能跳转到唯一的虚函数位置

springboot注解@ComponentScan注解作用

一 ComponentScan作用 1.1 注解作用 项目会默认扫描SpringBootApplication注解所在路径的同级和下级的所有子包&#xff0c;使用ComponentScan后他会取代掉默认扫描。 ComponentScan 是Spring框架的注解&#xff0c;它的作用是扫描指定的包路径下的标有 Component、Service、…

力扣300. 最长递增子序列(动态规划)

Problem: 300. 最长递增子序列 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 明确题目涉及到求取最值问题因此我们可以考虑使用动态规划来解决问题 1.定义状态&#xff1a;定义int类型的dp数组表示以nums[i]结尾的序列的最长长度&#xff0c;初始化均为1即表示…

Python | Leetcode Python题解之第198题打家劫舍

题目&#xff1a; 题解&#xff1a; class Solution:def rob(self, nums: List[int]) -> int:if not nums:return 0size len(nums)if size 1:return nums[0]first, second nums[0], max(nums[0], nums[1])for i in range(2, size):first, second second, max(first nu…

LNBxx21的功能

LNBxx21功能&#xff1a; LNBxx21 家族是为卫星LNB模块供电/连接LNB块与接收机的集成化解决方案。LNBxx21的很多功能可以让LNB电源/接口符合国际标准&#xff0c;此外&#xff0c;模块内还包括一个I2C总线接口&#xff0c;因为集成了一个升压直流-直流控制器&#xff0c;所以可…

MySQL高级-InnoDB引擎-事务日志- redo log(事务持久性的保证)

文章目录 1、redo log1.1、重做日志缓冲&#xff08;redo log buffer&#xff09;1.2、重做日志文件&#xff08;redo log file&#xff09; 2、如果没有redo log&#xff0c;可能会存在什么问题的&#xff1f;2.2、我们一起来分析一下。 2.2、那么&#xff0c;如何解决上述的问…

利用Matlab制作Gif图

Gif图相当于是由许多张图片拼接而成的一个“短视频”&#xff0c;因此在制作Gif图之前我们需要先准备多张图片。以下代码实现的是在当前路径下创建了一个image文件夹&#xff0c;并将绘制的HRRP通过saveas函数保存至image文件夹中&#xff0c;并命名为1.png、2.png、 %% 绘制H…

012、GridFS文件查询过程深度解析

目录 GridFS文件查询过程深度解析 1. GridFS基本概念 2. 查询过程详解 2.1 查询文件元数据 2.2 计算块数量和范围 2.3 查询文件块 2.4 组装文件内容 3. 优化查询性能 3.1 索引优化 3.2 流式处理 4. 高级查询技巧 4.1 范围查询 4.2 元数据查询 5. GridFS查询性能研…

[leetcode]assign-cookies. 分发饼干

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(s.begin(), s.end());int m g.size(), n s.size();int count 0;for (int i 0, j 0; i…

Python 实现Excel转TXT,或TXT文本导入Excel

Excel是一种具有强大的数据处理和图表制作功能的电子表格文件&#xff0c;而TXT则是一种简单通用、易于编辑的纯文本文件。将Excel转换为TXT可以帮助我们将复杂的数据表格以文本的形式保存&#xff0c;方便其他程序读取和处理。而将TXT转换为Excel则可以将文本文件中的数据导入…

c进阶篇(一):数据的存储

1.数据类型介绍 char // 字符数据类型 short // 短整型 int // 整形 long // 长整型 long long // 更长的整形 float // 单精度浮点数 double // 双精度浮点数 1.1整形家族&#xff1a; char unsigned char signed char …

Transformer基础及视觉应用

文章目录 Transformer基础及视觉应用注意力机制基础(主要介绍Transformer用到的类型)Transformer的编解码器结构(Encoder and Decoder)Non-local Neural NetworksTransformer与大规模图像识别(Image Recognition at Scale)DETR-2020分割应用 Transformer基础及视觉应用 注意力…

【算法训练记录——Day36】

Day36——贪心Ⅳ 1.leetcode_452用最少数量的箭引爆气球2.leetcode_435无重叠区间3.leetcode_763划分字母区间4.leetcode_ 1.leetcode_452用最少数量的箭引爆气球 思路&#xff1a;看了眼题解&#xff0c;局部最优&#xff1a;当气球出现重叠&#xff0c;一起射&#xff0c;所用…

YOLOv5改进 | 注意力机制 | 迈向高质量像素级回归的极化自注意力【全网独家】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a; 《YOLOv5入门 …

高精密机械设备中滚珠导轨的表面处理工艺有哪些?

滚珠导轨是机床传动和定位的传动元件&#xff0c;其表面处理方式对机床性能和使用寿命起着决定性的作用&#xff0c;不同的表面处理方法可以提高导轨的耐磨性、抗腐蚀性和整体性能。那么&#xff0c;滚珠导轨的表面处理方式有哪几种呢&#xff1f; 1、磨削法&#xff1a;磨削技…

AFLNet入门教学——安装(Ubuntu22.04.4)

1、AFLNet简介 AFLNet 是一种专门用于测试网络协议实现的模糊测试工具。模糊测试是一种软件测试技术&#xff0c;通过向目标程序提供大量随机或半随机数据来发现潜在的漏洞和错误。AFLNet 的设计目标是增强 AFL (American Fuzzy Lop) 的功能&#xff0c;以更有效地测试网络协议…