HTML+CSS:动态搜索框

效果演示

42-动态搜索框.gif

这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色,搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时,输入框会从搜索图标的位置滑出,显示一个输入框和一个清除按钮。用户可以在输入框中输入搜索内容,点击右侧的按钮进行搜索。整体布局居中显示在页面上。

Code

<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>
* {margin: 0; /* 设置所有元素的外边距为0 */padding: 0; /* 设置所有元素的内边距为0 */box-sizing: border-box; /* 设置盒模型为border-box,包括内边距和边框在内的尺寸计算方式 */
}body {width: 100vw; /* 设置body宽度为视口宽度 */height: 100vh; /* 设置body高度为视口高度 */background: linear-gradient(to bottom, skyblue, #003462); /* 设置背景为从上到下的线性渐变色 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}.searchBar {width: 60px; /* 设置搜索栏宽度 */height: 60px; /* 设置搜索栏高度 */background-color: #fff; /* 设置背景颜色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, .4); /* 设置阴影效果 */border-radius: 60px; /* 设置圆角为半径的大小 */position: relative; /* 设置相对定位 */overflow: hidden; /* 超出部分隐藏 */transition: .5s; /* 设置过渡效果时长为0.5秒 */
}.icon {width: 60px; /* 设置图标容器宽度 */height: 60px; /* 设置图标容器高度 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */cursor: pointer; /* 鼠标移上去显示手型 */
}.icon i {color: dodgerblue; /* 设置图标颜色为深蓝色 */font-size: 30px; /* 设置图标大小为30像素 */
}.textInput {width: 320px; /* 设置输入框宽度 */height: 60px; /* 设置输入框高度 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */background-color: blue; /* 设置背景颜色为蓝色 */position: absolute; /* 设置绝对定位 */top: 0; /* 顶部对齐 */left: 60px; /* 距离左侧60像素 */
}.textInput input {width: 100%; /* 输入框宽度占满父容器 */height: 100%; /* 输入框高度占满父容器 */border: none; /* 去除边框 */outline: none; /* 去除外边框 */font-size: 18px; /* 设置字体大小为18像素 */
}.clear {width: 15px; /* 设置清除按钮宽度 */height: 15px; /* 设置清除按钮高度 */position: absolute; /* 设置绝对定位 */right: 22%; /* 距离右侧22% */top: 50%; /* 顶部对齐 */transform: translateY(-50%); /* 垂直居中 */cursor: pointer; /* 鼠标移上去显示手型 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}.clear i {color: #999; /* 设置清除图标颜色为灰色 */
}.goBtn {width: 12%; /* 设置按钮宽度为父容器宽度的12% */height: 60%; /* 设置按钮高度为父容器高度的60% */position: absolute; /* 设置绝对定位 */top: 20%; /* 距离顶部20% */right: 0; /* 靠右对齐 */border-radius: 8px; /* 设置圆角为8像素 */outline: none; /* 去除外边框 */border: none; /* 去除边框 */color: #fff; /* 设置文字颜色为白色 */box-shadow: 0 0 2px rgba(0, 0, 0, .4); /* 设置阴影效果 */background: linear-gradient(skyblue, deepskyblue); /* 设置背景为从天蓝色到深天蓝色的线性渐变色 */cursor: pointer; /* 鼠标移上去显示手型 */
}.changeWidth {width: 400px; /* 设置具有changeWidth类名元素的宽度为400像素 */
}

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

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

相关文章

Unity(第三部)新手绘制地形

1、创建地形 游戏对象3d对象地形 2、功能 1、 红框内按键为创建相邻地形、点击后相近地形会呈现高亮框、点击高亮区域可以快速创建地形 每块地形面积是1km*1km 2、第二个按钮是修改地形 下面的选择是修改类型 选项含义描述Raise or Lower Terrain升高或降低地形单击左键可…

pikachu靶场-File Inclusion

介绍&#xff1a; File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码文件中直接包含&#xff08;引入&#xff09;另外一个代码文件。 比如 在PHP中&#xff0c;提供了&…

5G网络(接入网+承载网+核心网)

5G网络&#xff08;接入网承载网核心网&#xff09; 一、5G网络全网架构图 这张图分为左右两部分&#xff0c;右边为无线侧网络架构&#xff0c;左边为固定侧网络架构。 无线侧&#xff1a;手机或者集团客户通过基站接入到无线接入网&#xff0c;在接入网侧可以通过RTN或者IP…

如何在Linux Ubuntu系统使用Docker快速部署MongoDB并公网访问

文章目录 前言1. 安装Docker2. 使用Docker拉取MongoDB镜像3. 创建并启动MongoDB容器4. 本地连接测试5. 公网远程访问本地MongoDB容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主要介绍如何在Linux Ubuntu系统使用Docker快速部署Mon…

互联网加竞赛 机器视觉 opencv 深度学习 驾驶人脸疲劳检测系统 -python

文章目录 0 前言1 课题背景2 Dlib人脸识别2.1 简介2.2 Dlib优点2.3 相关代码2.4 人脸数据库2.5 人脸录入加识别效果 3 疲劳检测算法3.1 眼睛检测算法3.2 打哈欠检测算法3.3 点头检测算法 4 PyQt54.1 简介4.2相关界面代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#x…

8.qt5使用opencv的库函数打开图片

1.配置opencv动态库的环境变量 2.在创建的qt工程中加入如下opencv代码&#xff0c;具体代码如下&#xff1a; 使用opencv库函数显示图片

Linux进一步研究权限-----------ACL使用

一、使用情况 1.1、场景: 某个大公司&#xff0c;在一个部门&#xff0c;有一个经理和手下有两个员工&#xff0c;在操控一个Linux项目,项目又分为三期做&#xff0c;然而一期比较重要&#xff0c;经理带着员工做完了&#xff0c;公司就觉得技术难点已经做完攻克了&#xff0…

【自然语言处理-二-attention注意力 是什么】

自然语言处理二-attention 注意力机制 自然语言处理二-attention 注意力记忆能力回顾下RNN&#xff08;也包括LSTM GRU&#xff09;解决memory问题改进后基于attention注意力的modelmatch操作softmax操作softmax值与hidder layer的值做weight sum 计算和将计算出来的和作为memo…

《Python 语音转换简易速速上手小册》第1章 Python语音处理概述(2024 最新版)

文章目录 1.1 语音处理的基础1.1.1 基础知识1.1.2 主要案例:自动语音识别系统案例介绍案例 Demo案例分析1.1.3 扩展案例 1:智能虚拟助手案例介绍案例 Demo案例分析1.1.4 扩展案例 2:情感分析系统案例介绍案例 Demo

NATS学习笔记(一)

NATS是什么&#xff1f; NATS是一个开源的、轻量级、高性能的消息传递系统&#xff0c;它基于发布/订阅模式&#xff0c;由Apcera公司开发和维护。 NATS的功能 发布/订阅&#xff1a;NATS的核心是一个发布/订阅消息传递系统&#xff0c;允许消息生产者发布消息到特定的主题…

2024生物发酵魅力展示会-光德流体

参展企业介绍 河北光德流体控制有限公司始建于1996年&#xff0c;是一家从事以不锈钢为母材的洁净应用材料研发与专业制造的实体企业。产品主要包括卫生级球阀&#xff0c;隔膜阀&#xff0c;蝶阀等&#xff0c;并广泛应用于生物发酵&#xff0c;医疗制药&#xff0c;食品饮料…

初识51单片机

##江科大51单片机学习 什么是单片机&#xff1f;&#xff1f;&#xff1f; 单片机&#xff0c;英文名&#xff0c;Micro Controller Unit&#xff0c;简称MCU&#xff08;tips&#xff1a;有人会简称它为CPU&#xff0c;但不是如此&#xff0c;CPU其实被集成在MCU中&#xff…

视频评论抓取软件|抖音数据抓取工具

最近我们推出了一款基于C#语言开发的工具。这款工具提供了丰富的功能&#xff0c;旨在帮助用户轻松获取抖音视频内容。让我们一起来详细介绍一下这款工具的主要功能模块&#xff1a; 1. 批量视频提取&#xff1a; 工具提供了便捷的批量视频提取功能&#xff0c;用户只需输入关…

第3部分 原理篇2去中心化数字身份标识符(DID)(3)

3.2.2.4. DID文档 (DID Document) 本聪老师&#xff1a;DID标识符和DID URL还都只是ID&#xff0c;必须为它附加一个基本属性才可以证明是该主体独有的。这个就是我们下面介绍的DID文档。 本聪老师&#xff1a;每个DID标识符都唯一对应一个DID文档&#xff0c;也可以说&#x…

潇洒郎:2024 IDEA、Pycharm获取最新激活码获取方式

IDEA获取最新激活码 https://idea.javatiku.cn/ 手机打开&#xff0c;看到验证码&#xff0c;30分钟有效&#xff0c;输入验证码 获取到最新激活码

Redis(十六)缓存预热+缓存雪崩+缓存击穿+缓存穿透

文章目录 面试题缓存预热缓存雪崩解决方案 缓存穿透解决方案 缓存击穿解决方案案例&#xff1a;高并发聚划算业务 总结表格 面试题 缓存预热、雪崩、穿透、击穿分别是什么?你遇到过那几个情况?缓存预热你是怎么做的?如何避免或者减少缓存雪崩?穿透和击穿有什么区别?他两是…

基于大数据的智能家居销量数据分析

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

[HTML]Web前端开发技术28(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…

HTTP概要

文章目录 什么是HTTP?URL的结构请求报文结构请求方法GETHEADPOSTPUTDELETETRACEOPTIONSCONNECTPATCH解释 请求头字段 响应报文结构响应状态响应头字段 HTTP会话3次握手无状态协议 什么是HTTP? HTTP&#xff0c;即Hypertext Transfer Protocol(超文本传输协议) 它是一个”请…

Linux——简单的Shell程序

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、Shell程序思路二、Shell代码展示 一、Shell程序思路 用下图的时间轴来表示事件的发生次序…