CSS - 搜索框小动效

在这里插入图片描述在这里插入图片描述

点击搜索框动画变长,搜索框有内容不变,无内容失去焦点,变回原来模样。<div :class="type == true ? 's_r_z' : 's_r'" @click="onChange"><div class="input_s"><input @blur="handleBlur" v-model="input" required placeholder="请输入关键词搜索" /></div><img src="../../../../assets/images/v_15.png" /></div>mounted() {// 监听全局点击事件window.addEventListener('click', this.handleClickOutside);},beforeDestroy() {// 组件销毁前移除监听事件window.removeEventListener('click', this.handleClickOutside);},methods: {// 如果点击事件的目标不是打开的div也不是其子元素,则关闭divhandleClickOutside(event) {if (!this.$el.contains(event.target) && this.type && this.input == '') {this.type = false;}},onChange() {this.type = true},
}.s_r {display: flex;width: 62px;height: 30px;background: #E3F1FF;border-radius: 20px;cursor: pointer;margin: 0px 0px 0px 30px;margin-top: -7px;transition: all 1s ease-in-out;-webkit-transition: width 1s;img {width: 20px;height: 20px;position: relative;left: 20px;top: 5px;}input {display: none;}}.s_r_z {display: flex;justify-content: center;align-items: center;width: 240px;height: 30px;background: #E3F1FF;border-radius: 20px;border: 1px solid #258DEC;animation: kx 0.5s;margin: 0px 0px 0px 30px;margin-top: -8px;img {width: 20px;height: 20px;}input {outline-style: none;border: none;background-color: #E3F1FF;animation: zk 1s;}}@keyframes kx {0% {width: 0px}100% {width: 240px;}}@keyframes zk {0% {width: 0px}100% {width: 200px;}}

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

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

相关文章

计算机毕业设计选题推荐-流浪动物领养管理系统-Java/Python项目实战(亮点:数据可视化分析、智能推荐)

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

uniapp 各个端接入腾讯滑动行为验证码示例

验证调起页面&#xff1a; <template><view class"app"><text>{{ obj.ret }}</text><button click"varify">验证</button></view> </template><script>export default{data(){return{obj: {}}},on…

黑马大事件项目开发

项目介绍 演示网站&#xff1a; https://fe-bigevent-web.itheima.net/login 实现 1&#xff09;创建项目 npm init vuelatest2&#xff09;安装项目需要的依赖 npm install element-plus --save npm install axios npm install sass -D3&#xff09;在main.js中加入Elem…

金融行业项目管理软件分享!华福证券上线奥博思 PowerProject 项目管理系统

如何正确的评估一款项目管理软件是否适合金融行业&#xff1f;金融机构例如银行、券商等企业在选型项目管理软件时可以从以下几方面考虑&#xff1a; 1&#xff0c;管理驾驶舱 金融机构需要对项目的各项数据进行深入分析&#xff0c;以便做出科学的决策。软件应能够生成详细的…

Cesium 展示——静态水添加动态波纹,模拟真实水面效果

文章目录 需求分析材料准备根据几何实例创建贴地面图元将图元添加到集合补充需求 分析 材料准备 首先我们需要准备水波的图片,放在最后大家自行

AI prompt(提示词)

# 好用的用于学习的AI提示词 ## 费曼学习法 请使用费曼学习法&#xff0c;用简单的语言解释&#xff08;量子力学&#xff09;是什么&#xff0c;并提供一个简单的例子来说明它如何应用 ## 帕累托法则&#xff08;80/20原则&#xff09; 将&#xff08;量子力学&#xff09;最…

Android 12 SystemUI下拉状态栏禁止QuickQSPanel展开

1.概述 遇到需求&#xff0c;QuickQSPanel首次下拉后展示快捷功能模块以后就是显示QuickQSPanel&#xff0c;而不展开QSPanel&#xff0c;接下来要从下滑手势下拉出状态栏分析功能实现。也就是直接是展开状态。 2、涉及核心类 frameworks\base\packages\SystemUI\src\com\and…

数据资产:新时代的财富密码

嘿&#xff0c;朋友们&#xff01;今天要和大家聊聊一个在数字化时代重要的话题 —— 数据资产&#xff0c;它可是新时代的财富密码哦 数据资产的庐山真面目 数据资产呢&#xff0c;就是企业或者个人拥有或控制的&#xff0c;能带来经济效益的数据资源。它的特点可不少呢。首先…

网络设备安全

网络设备安全概况 交换机安全威胁&#xff1a;交换机是网络基础设备&#xff0c;负责网络通信数据包的交换传输 交换机面临的网络安全威胁&#xff1a; 路由器安全威胁 网络设备安全机制与实现技术 认证机制&#xff1a;为防止网络设备滥用&#xff0c;网络设备读用户身份进行…

服务器断电,Centos7启动报错

服务器上安装了VMWare&#xff0c;在之上安装了Centos7&#xff0c;突发断电&#xff0c;再次启动报错 mount /dev/mapper/centos-root /sysroot执行后提示&#xff1a;xfs(dm-0):internal error xfs_want_corrupted_goto at line 993 of file fs/xfs/xfs_trans.c. Caaler xfs_…

E31.【C语言】练习:指针运算习题集(上)

Exercise 1 求下列代码的运行结果 #include <stdio.h> int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d",*(ptr - 1));return 0; } 答案速查: 分析&#xff1a; Exercise 2 求下列代码的运行结果 //在x86环境下 //假设结…

中秋之美——html5+css+js制作中秋网页

中秋之美——html5cssjs制作中秋网页 一、前言二、功能展示三、系统实现四、其它五、源码下载 一、前言 八月十五&#xff0c;秋已过半&#xff0c;是为中秋。 “但愿人长久&#xff0c;千里共婵娟”&#xff0c;中秋时节&#xff0c;气温已凉未寒&#xff0c;天高气爽&#x…

以太网--TCP/IP协议(一)

概述 以太网是局域网的一种&#xff0c;其他的比如还有令牌环、FDDI。和局域网对应的就是广域网&#xff0c;如Internet&#xff0c;城域网等。 从网络层次看&#xff0c;局域网协议主要偏重于低层&#xff08;业内一般把物理层、数据链路层归为低层&#xff09;。以太网协议…

2024Mysql And Redis基础与进阶操作系列(1)作者——LJS[含MySQL的下载、安装、配置详解步骤及报错对应解决方法]

目录 1.数据库与数据库管理系统 1.1 数据库的相关概念 1.2 数据库与数据库管理系统的关系 1.3 常见的数据库简介 Oracle 1. 核心功能 2. 架构和组件 3. 数据存储和管理 4. 高可用性和性能优化 5. 安全性 6. 版本和产品 7. 工具和接口 SQL Server 1. 核心功能 2. 架构和组…

Windows系统引入全新 Android 体验?快来尝鲜!

听说微软 Windows 11 操作系统引入全新体验 &#xff1a;实时访问 Android 设备图片。 意思就是在Android 设备上捕获了新照片或屏幕截图时&#xff0c;Windows 上立刻收到通知&#xff0c;且可以不用插数据线就能访问。 用Windows连接手机的功能其实早在Windows10就已经有的了…

GIS大事件!Bentley收购Cesium

9月6日&#xff0c;Cesium官方宣布加入Bentley。 Bentley我们并不陌生。最初Acute3D被Bentley公司收购&#xff0c;旗下软件由Smart3DCapture转型到ContextCapture&#xff0c;现又改名 iTwin Capture。 如今又收购了Cesium。 Cesium官方表示&#xff0c;Cesium开发平台与iTwi…

全能型AI vs专业型AI:谁主沉浮?

你是否听说过即将到来的AI革命&#xff1f;OpenAI的"草莓"模型即将在今年秋季问世&#xff0c;它不仅能解决复杂的数学问题&#xff0c;还能为你制定营销策略。这是否意味着AI正在向"全能型"发展&#xff1f;专业型AI是否即将成为历史&#xff1f;让我们一…

ROPS 自动化快速构造缓冲区溢出ROP链工具

项目地址:https://github.com/MartinxMax/ROPS ROPS 快速自动化构造ROP&#xff08;Return-Oriented Programming&#xff09;链的脚本&#xff0c;用于生成ROP攻击的有效载荷。 Usage $ ./rops.sh $ ./rops.sh /home/ayush/.binary/rop 该脚本将根据提供的二进制文件自动生…

抢鲜体验 PolarDB PG 15 开源版

unsetunsetPolarDB 商业版unsetunset 8 月&#xff0c;PolarDB PostgreSQL 版兼容 PostgreSQL 15 版本&#xff08;商业版&#xff09;正式发布上线。 当前版本主要增强优化了以下方面&#xff1a; 改进排序功能&#xff1a;改进内存和磁盘排序算法。 增强SQL功能&#xff1a;支…

全能型 AI 的崛起:未来的市场宠儿还是昙花一现?

近日&#xff0c;OpenAI 宣布将在秋季推出代号为“草莓”的新一代 AI 模型。这款 AI 被描述为全能型&#xff0c;从处理复杂的数学问题到应对主观性强的营销策略&#xff0c;它的能力可以覆盖多个领域。听起来像是科技界的“万能钥匙”&#xff0c;无论面对什么问题&#xff0c…