当前位置：首页 > news >正文

【后端学前端】第三天 css动画动态搜索框（定位、动态设置宽度）

news 2025/10/23 2:39:53

1、学习信息

视频地址：css动画动态搜索框（定位、动态设置宽度）_哔哩哔哩_bilibili

2、源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test3</title><link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100vw;height: 100vh;background: linear-gradient(to bottom, skyblue, #003462);display: flex;justify-content: center;align-items: center;}.searchBar {width: 400px;height: 60px;background-color: #ffffff;box-shadow: 0 0 10px rgba(0, 0, 0, .4);border-radius: 60px;position: relative;overflow: hidden;transition: .5s;}.icon {width: 60px;height: 60px;display: flex;justify-content: center;align-items: center;cursor: pointer;}.icon i{color: dodgerblue;font-size: 30px;}.textInput {width: 320px;height: 60px;position: absolute;top: 0;left: 60px;display: flex;justify-content: center;align-items: center;background-color: blue;}.textInput input {width: 100%;height: 100%;border: none;outline: none;font-size: 18px;}.clear {width: 15px;height: 15px;position: absolute;right: 22%;top: 50%;transform: translateY(-50%);cursor: pointer;display: flex;justify-content: center;align-items: center;}.clear i{color: #999;}.goBtn {width: 12%;height: 60%;position: absolute;top: 20%;right: 0;border-radius: 8px;outline: none;border: none;color: #ffffff;box-shadow: 0 0 2px rgba(0, 0, 0, .4);background: linear-gradient(skyblue, deepskyblue);cursor: pointer;}.searchBar{width: 60px;}.changeWidth{width: 400px;}</style><script>window.onload =()=>{let searchIcon = document.querySelector(".icon")let clearIcon = document.querySelector(".clear")let searchBar = document.querySelector(".searchBar")let inp = document.querySelector(".inp")searchIcon.addEventListener("click",()=>{searchBar.classList.toggle("changeWidth")})clearIcon.addEventListener("click",()=>{inp.value=""})}</script>
</head>
<body><div class="searchBar"><div class="icon"> <i class="iconfont icon-sousuoxiao"></i></div><div class="textInput"><input class="inp" type="text" placeholder="请输入搜索关键字"><button class="goBtn">go</button><div class="clear"><i class="iconfont icon-close"></i></div></div></div>
</body>
</html>

3、怎么实现拉出

通过对大的容器动态设置宽度按，也就是

searchBar 的宽度设置为400px

这里学到一个注意点：在class后的属性会覆盖先写的属性

searchBar的最早宽度是400px，在后面又新定义了一个searchBar的样式为60px

4、关于<i>

看教程，<i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

但是在代码中却用图标，在知乎也看到了类似的问题

问题地址：为什么大家都用i标签<i></i>用作小图标? - 知乎

貌似这样不对，但是大家都这样用

5、关于布局

布局一直我想学习的，一直也没总结出什么

找了一个文章【CSS】CSS布局解决方案（终结版） - 掘金

1.2 页面整体布局

先分析行模块
如果一行当中有多个模块，一定要放在同一个父模块中

1.3 单个模块布局

先给模块宽高背景颜色
然后再分析模块的文本属性背景其他属性

CSS书写顺序：

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文本(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

6、缩起来只显示搜索

        .textInput {width: 320px;height: 60px;position: absolute; /*当被设置了绝对定位的元素，在文档流中是不占据空间的*/top: 0;left: 60px;display: flex;justify-content: center;align-items: center;background-color: blue;}

position: absolute; /*当被设置了绝对定位的元素，在文档流中是不占据空间的*/

textInput 不占据空间，最终searchBar的空间会全部给到icon

【后端学前端】第三天 css动画动态搜索框（定位、动态设置宽度）

1、学习信息视频地址：css动画动态搜索框（定位、动态设置宽度）_哔哩哔哩_bilibili 2、源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>test3</title>…...

编程日记 2023/12/17 22:26:23

51.0/表单(详细版)

目录 51.1 输入元素 input 51.1.1 文本域 51.1.2 密码输入框 51.1.3 单选框 51.1.4 复选框 51.1.5 提交按钮 51.1.6 重置按钮 51.1.7 普通按钮 51.1.8 图片按钮 51.1.9 隐藏域 51.1.10 文件域 51.2 多行文本框 51.3 下拉列表框 51.4 表单的综合示例表单是网页中…...

编程日记 2023/12/17 22:24:21

动态规划（Dynamic Programming）

动态规划（Dynamic Programming）：是运筹学的一种最优化方法，只不过在计算机问题上应用比较多 DP常见步骤： 暴力递归/穷举记忆化搜索（傻缓存递归）,使用备忘录/ DP Table 来优化穷举过程严格表结…...

编程日记 2023/12/17 22:23:21

linux使用文件描述符0、1和2来处理输入和输出

文件描述符012 在Linux中，文件描述符0、1和2分别代表标准输入（stdin）、标准输出（stdout）和标准错误（stderr）。它们用于处理进程的输入和输出。文件描述符0（stdin）&…...

编程日记 2023/12/17 22:19:17

how to write and run .ps1

use .txt filechange the suffix to .ps1 from .txt 3）how to run .ps1 3.1) PS D:> .\test.ps1 1 2 3 4 5 6 7 8 9 10 3.2) PS D:> tes then press tab key to compensate and complete the whole file name...

编程日记 2023/12/17 22:18:16

如何在PHP中处理跨域请求？

在 PHP 中处理跨域请求（CORS，Cross-Origin Resource Sharing），通常需要在服务器端设置相应的 HTTP 头，以允许来自其他域的请求。以下是一些处理跨域请求的方法： 设置 HTTP 头： 在服务器端&#…...

编程日记 2023/12/17 22:16:14

spring boot 配置多数据源踩坑 BindingException: Invalid bound statement (not found)

在上一篇：《【已解决】Spring Boot多数据源的时候，mybatis报错提示：Invalid bound statement (not found)》凯哥(凯哥Java) 已经接受了，在Spring Boot配置多数据源时候，因为自己马虎，导致的一个坑。下面&a…...

编程日记 2023/12/17 22:14:13

【产品】Axure的基本使用（二）

文章目录一、元件基本介绍1.1 概述1.2 元件操作1.3 热区的使用二、表单型元件的使用2.1 文本框2.2 文本域2.3 下拉列表2.4 列表框2.5 单选按钮2.6 复选框2.7 菜单与表格元件的使用三、实例3.1 登录2.2 个人简历一、元件基本介绍 1.1 概述在Axure RP中，元件是…...

编程日记 2023/12/17 22:12:11

Python语言学习笔记之十（字符串处理）

本课程对于有其它语言基础的开发人员可以参考和学习，同时也是记录下来，为个人学习使用，文档中有此不当之处，请谅解。字符串处理：以实现字符串的分割、替换、格式化、大小写转换，Python字符串处理是指对Py…...

编程日记 2023/12/17 22:10:09

WPF-附加属性《十二》

非常重要依赖属性和附加属性，两者是有关系的，也是有些区别的，很多时候，可能会把两者混淆了。附加属性（Attach Property） 顾名思义，就是附加上面的属性，自身是没有的，…...

编程日记 2023/12/17 22:07:06

算法通关第十九关-青铜挑战理解动态规划

大家好我是苏麟 , 今天聊聊动态规划 . 动态规划是最热门、最重要的算法思想之一，在面试中大量出现，而且题目整体都偏难一些对于大部人来说，最大的问题是不知道动态规划到底是怎么回事。很多人看教程等，都被里面的状态子问题、状态…...

编程日记 2023/12/17 22:05:05

2023 GitHub年度排行榜，JEECG上榜第三名，势头依然很猛~

2023 GitHub年度排行榜TOP10，JeecgBoot上榜第三名，势头依然很猛~...

编程日记 2023/12/17 22:02:02

由@EnableWebMvc注解引发的Jackson解析异常

同事合了代码到开发分支，并没有涉及到改动的类却报错。错误信息如下： Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.http.conv…...

编程日记 2023/12/17 22:01:01

ce从初阶到大牛--函数

1、显示/etc/passwd文件中以bash结尾的行； grep "bash$" /etc/passwd2、找出/etc/passwd文件中的三位或四位数； grep -E \b[0-9]{3,4}\b /etc/passwd3、找出/etc/grub2.cfg文件中，以至少一个空白字符开头，后面又跟了非…...

编程日记 2023/12/17 21:55:57

Java学习异常类

1 定义异常就是指程序运行时可能出现的一些错误，例如数组越界、除零等。我们也可以把自己觉得不合理的结果定义为“异常” 2 异常与错误 3 Java中的异常处理 catch语句：对异常的处理语句放在 catch部分，可以包含多个catch语句&#xff0c…...

编程日记 2023/12/17 21:54:56

Python 全栈体系【四阶】（六）

第四章机器学习五、线性模型 1. 概述线性模型是自然界最简单的模型之一，它描述了一个（或多个）自变量对另一个因变量的影响是呈简单的比例、线性关系。例如： 住房每平米单价为 1 万元，100 平米住房价格为 100 万…...

编程日记 2023/12/17 21:53:55

从memcpy()函数中学习函数的设计思想

memcpy()函数：可以理解为内存拷贝。他的函数定义如下的 my_memcpy()函数相同。下面这个函数是我的模拟实现，现在让我们一起来学习一下这个函数的设计思想： void * my_memcpy(void * des, const void* src, size_t size) {void * p des;…...

编程日记 2023/12/17 21:47:50

【PostgreSQL】从零开始:（二）PostgreSQL下载与安装

【PostgreSQL】从零开始:（二）PostgreSQL下载与安装 Winodws环境下载与安装PostgreSQL下载PostgreSQL安装PostgreSQL1.登录数据库2.查看下我们已有的数据库 Liunx环境下载与安装PostgreSQL使用YUM下载安装PostgreSQL1.下载PostgreSQL安装包2.安装PostgreS…...

编程日记 2023/12/17 21:46:49

PHP的垃圾回收机制是怎样的？

PHP 使用自动垃圾回收机制来管理内存。PHP 的垃圾回收主要依赖于引用计数和周期性垃圾回收两种策略。引用计数： PHP 使用引用计数来跟踪变量的引用次数。每当一个变量被引用，其引用计数就增加；每当一个引用被释放，计数就减少。当…...

编程日记 2023/12/17 21:45:47

【数据结构】八大排序之希尔排序算法

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.优化直接插入排序算法我们在之前对直接插入排序算法的优化部分通过对直接插入排序的分析可以得到一个结论,即: 进行直接插入排序的数组,如果越接近局部有序,则后续进行直…...

编程日记 2023/12/17 21:44:46

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/10/20 3:10:47

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/10/17 15:45:03

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...

编程新知 2025/10/20 21:15:32

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。问题一：历史轨迹与小球残影残留现象小球运动后，历史位置的 “残影”…...

编程新知 2025/10/16 13:25:41

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...

编程新知 2025/10/1 9:59:39

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46