用html写一个搜索页面

news2024/12/24 8:36:29

请添加图片描述

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>搜索框设计</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="search-overlay"></div>
<div class="scroll-cont">
  <div class="content">
    <div class="search">
      <div class="search_bg"></div>
      <div class="search_box">
        <input type="text" class="search_input" placeholder="Search"/>
        <div class="search_line"></div>
        <div class="search_close"></div>
      </div>
    </div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>
</body>
</html>

(function() {
    var $searchOverlay = document.querySelector(".search-overlay");
    var $search = document.querySelector(".search");
    var $clone, offsetX, offsetY;
  
    $search.addEventListener("click", function() {
      var $original = this;
      $clone = this.cloneNode(true);
  
      $searchOverlay.classList.add("s--active");
  
      $clone.classList.add("s--cloned", "s--hidden");
      $searchOverlay.appendChild($clone);
  
      var triggerLayout = $searchOverlay.offsetTop;
  
      var originalRect = $original.getBoundingClientRect();
      var cloneRect = $clone.getBoundingClientRect();
  
      offsetX = originalRect.left - cloneRect.left;
      offsetY = originalRect.top - cloneRect.top;
  
      $clone.style.transform = "translate("+ offsetX +"px, "+ offsetY +"px)";
      $original.classList.add("s--hidden");
      $clone.classList.remove("s--hidden");
  
      var triggerLayout = $searchOverlay.offsetTop;
  
      $clone.classList.add("s--moving");
  
      $clone.setAttribute("style", "");
  
      $clone.addEventListener("transitionend", openAfterMove);
    });
  
    function openAfterMove() {
      $clone.classList.add("s--active");
      $clone.querySelector("input").focus();
  
      addCloseHandler($clone);
      $clone.removeEventListener("transitionend", openAfterMove);
    };
    
    function addCloseHandler($parent) {
      var $closeBtn = $parent.querySelector(".search_close");
      $closeBtn.addEventListener("click", closeHandler);
    };
  
    /* 关闭处理函数 */
    function closeHandler(e) {
      $clone.classList.remove("s--active");
      e.stopPropagation();
      
      var $cloneBg = $clone.querySelector(".search_bg");
  
      $cloneBg.addEventListener("transitionend", moveAfterClose);
    };
    
    function moveAfterClose(e) {
      e.stopPropagation(); // 防止双重转换,以及防止在父级$clone上触发
      
      $clone.classList.add("s--moving");
      $clone.style.transform = "translate("+ offsetX +"px, "+ offsetY +"px)";
      $clone.addEventListener("transitionend", terminateSearch);
    };
    
    function terminateSearch(e) {
      $search.classList.remove("s--hidden");
      $clone.remove();
      $searchOverlay.classList.remove("s--active");
    };
  }());

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    height: 100%;
    background-image: url(https://source.unsplash.com/6ZZh8kOyW-4);
    background-size: cover;
  }
  
  .search-overlay {
    z-index: -1000;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .search-overlay.s--active {
    z-index: 9999;
  }
  
  .scroll-cont {
    position: relative;
    height: 100%;
    overflow-y: auto;
  }
  
  .content {
    padding: 50px;
  }
  
  .search {
    position: relative;
    margin: 0 auto 50px;
    width: 100px;
    height: 100px;
    perspective: 1000px;
  }
  
  .search:not(.s--active) {
    cursor: pointer;
  }
  
  .search.s--hidden {
    opacity: 0;
  }
  
  .search.s--cloned {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    margin-left: -58px;
    margin-top: -58px;
    margin-right: 0;
    margin-bottom: 0;
  }
  
  .search.s--moving {
    transition: transform 0.4s cubic-bezier(0.56, -0.49, 0.58, 0.9);
  }
  
  .search_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(236, 83, 83, 0.8);
    transition: all 0.6s ease;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
  }
  
  .search.s--active .search_bg {
    transform: translate3d(-50%, -50%, 0) scale(48);
  }
  
  .search_box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid #fff;
    border-radius: 25px;
    transform: translate(-50%, -50%);
    transition: all 0.45s ease;
  }
  
  .search.s--active .search_box {
    width: 510px;
    height: 100px;
    border-radius: 50px;
  }
  
  .search_input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    pointer-events: none;
    opacity: 0;
    color: #fff;
    font-size: 40px;
    transition: opacity 0s;
  }
  
  .search_input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .search_input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .search_input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .search.s--active .search_input {
    padding: 23px 90px 23px 40px;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.18s 0.48s;
  }
  
  .search_line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: #fff;
    transform-origin: 0 50%;
    transform: translate(12px, 12px) rotate(45deg);
    transition: all 0.48s;
  }
  
  .search_line:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .search.s--active .search_line:before {
    opacity: 1;
    transition: opacity 0.3s 0.42s;
  }
  
  .search.s--active .search_line {
    width: 36px;
    height: 6px;
    transform: translate(180px, 11px) rotate(-45deg);
  }
  
  .search_close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    pointer-events: none;
  }
  
  .search.s--active .search_close {
    right: 44px;
    top: 33px;
    pointer-events: auto;
    cursor: pointer;
  }

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第 393 场周赛

第 393 场周赛

100256. 替换字符可以得到的最晚时间 给你一个字符串 s&#xff0c;表示一个 12 小时制的时间格式&#xff0c;其中一些数字&#xff08;可能没有&#xff09;被 "?" 替换。 12 小时制时间格式为 "HH:MM" &#xff0c;其中 HH 的取值范围为 00 至 11&am…
阅读更多...
VBA技术资料MF143：将PowerPoint中幻灯片导出为图片

VBA技术资料MF143：将PowerPoint中幻灯片导出为图片

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
【Qt 学习笔记】Qt常用控件 | 显示类控件Progress Bar的使用及说明

【Qt 学习笔记】Qt常用控件 | 显示类控件Progress Bar的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 显示类控件Progress Bar的使用及说明 文章编号&#xff…
阅读更多...
Centos7 ElasticSearch集群搭建

Centos7 ElasticSearch集群搭建

1. 服务器环境配置 1.1 配置hosts文件 3台服务器都要执行 vim /etc/hosts; # 将以下内容写入3台服务器hosts文件 192.168.226.148 es001 192.168.226.149 es002 192.168.226.150 es003 1.2 关闭防火墙 3台服务器都要执行 systemctl stop firewalld; systemctl disable…
阅读更多...
SAP HCM 离职是1号 正确计算免税金额

SAP HCM 离职是1号 正确计算免税金额

员工是1号离职&#xff0c;如何正确计算个税中的免税金额&#xff0c;例如员工2024年3月1日离职&#xff0c;现在计算2月的工资&#xff0c;因为是下发薪所以&#xff0c;12月、1月、2月是三个月&#xff0c;3*500015000&#xff0c;但是系统计只有10000. 如果要计算出三个月&a…
阅读更多...
（CVPR，2024）CAT-Seg：基于成本聚合的开放词汇语义分割

（CVPR，2024）CAT-Seg：基于成本聚合的开放词汇语义分割

文章目录 摘要引言方法计算成本与嵌入空间成本聚合类别成本聚合CAT-Seg框架 实验 摘要 开放词汇的语义分割面临着根据各种文本描述对图像中的每个像素进行标记的挑战。在这项工作中&#xff0c;我们引入了一种新颖的基于成本的方法&#xff0c;以适应视觉语言基础模型&#xf…
阅读更多...
【算法】反转链表

【算法】反转链表

本题来源---《反转链表》 题目描述&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输…
阅读更多...
ansible模块实战-部署rsync服务端

ansible模块实战-部署rsync服务端

目录 1、根据部署流程所用到的命令找出模块 2.实战部署 2.1 服务部署&#xff1a;yum 安装 2.2 准备好rsync服务的配置文件 &#xff0c;并将配置文件通过copy模块分发给192.168.81.136这台受控主机 2.3 创建虚拟机用户 2.4 创建密码文件和改权限 2.5 模块对应目录&…
阅读更多...
大屏数字字体+渐变色

大屏数字字体+渐变色

vue数据大屏使用数字字体_vue数字字体-CSDN博客 用css实现文字字体颜色渐变的三种方法_css 字体颜色渐变-CSDN博客
阅读更多...
Java内存模型和 JVM 内存运行时

Java内存模型和 JVM 内存运行时

文章目录 前言一、什么是Java 的内存模型&#xff1f;二、什么是 JVM 的运行时数据区Java8 之前和之后的区别JVM 内存模型JVM 内存区域JVM 内存垃圾回收JVM如何判断哪些对象不在存活&#xff1f;JVM运行过程中如何判断哪些对象是垃圾&#xff1f; JVM 垃圾回收Java8 中的 jvm如…
阅读更多...
Codeforces Round 924 (Div. 2) ---- F. Digital Patterns ---- 题解

Codeforces Round 924 (Div. 2) ---- F. Digital Patterns ---- 题解

F. Digital Patterns&#xff1a; 题目描述&#xff1a; 思路解析&#xff1a; 要求在一个方块中&#xff0c;任意相邻的方块中他的透明度系数不能相同&#xff0c;这样的方块称为趣味性方块&#xff0c;问这样的方块有多少种。 那么我们可以相当&#xff0c;假设 a1 a2, 那…
阅读更多...
Day 17 计划任务

Day 17 计划任务

计划任务&#xff1a;在约定好的时间完成计划好的工作 一次性计划任务&#xff1a;at ①安装一次性计划任务at&#xff1a;yum -y install at ②启动at服务&#xff1a;systemctl start atd 使用at命令 at 执行任务的时间 at> 写入需要执行的命令 at> ...... …
阅读更多...
数字营销：细分-目标-定位（STP）模式——如何实现精准营销

数字营销：细分-目标-定位（STP）模式——如何实现精准营销

细分-目标-定位&#xff08;STP&#xff09;模型是最广为人知的营销策略之一。作为营销人员&#xff0c;我们倾向于追逐新鲜事物&#xff0c;总是追求最新、最闪亮的营销技术&#xff0c;并为自己领先于趋势而感到自豪。与内容营销相结合&#xff0c;STP模式仍然是简化营销运作…
阅读更多...
Linux http协议与实现http服务器

Linux http协议与实现http服务器

目录 一、HTTP与URL 1、HTTP协议 2、URL 3、URL编码 4、报文与报头 报文&#xff08;Message&#xff09; 报头&#xff08;Header&#xff09; 二、HTTP&#xff08;超文本传输协议&#xff09;的内部运作机理 请求部分&#xff1a; 响应部分&#xff1a; 三、实现…
阅读更多...
聊聊binlog是什么

聊聊binlog是什么

1. 上一讲思考題解答:redo日志刷盘策略的选择建议 先给大家解释一下上一讲的思考題&#xff0c;我给大家的一个建议&#xff0c;其实对于redo日志的三种刷盘策略&#xff0c;我们通常建议是设置为1 也就是说&#xff0c;提交事务的时候&#xff0c;redo日志必须是刷入磁盘文件…
阅读更多...
Java代码基础算法练习-水仙花数-2024.04.17

Java代码基础算法练习-水仙花数-2024.04.17

任务描述&#xff1a; 水仙花数也被称为超完全数字不变数、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数。水仙花数是 指一个 3 位数&#xff0c;它的每个位上的数字的3次幂之和等于它本身。 例如: 1的3次方 5的3次方 …
阅读更多...
python 海龟画图tutle螺旋线

python 海龟画图tutle螺旋线

目录 初识turtle模块 基本绘图概念 示例&#xff1a;绘制一个正方形 示例&#xff1a;绘制彩色螺旋线 附录 常用命令 其它命令 在Python编程中&#xff0c;使用turtle模块进行图形绘制是一种非常有趣和富有教育意义的活动。通过控制一个小海龟&#xff08;Turtle&#x…
阅读更多...
2010-2022年各省新质生产力测算数据（含原始数据+计算代码+计算结果）

2010-2022年各省新质生产力测算数据（含原始数据+计算代码+计算结果）

2010-2022年各省新质生产力测算数据&#xff08;含原始数据计算代码计算结果&#xff09; 1、时间&#xff1a;2010-2022年 2、来源&#xff1a;国家统计局、各省年鉴、能源年鉴、环境年鉴 3、范围&#xff1a;31省 4、指标&#xff1a; 省份、年份、分地区授权专利数&…
阅读更多...
Java中类加载的机制

Java中类加载的机制

Java中类加载的机制 从宏观上看&#xff1a; 加载->链接->初始化 整个生命周期流程&#xff1a; 加载->验证->准备->解析->初始化->使用->卸载 1、加载 查找并加载类的二进制数据&#xff0c;并生成Class对象的实例的过程 也就是将类的.class文件…
阅读更多...
excel里如何的科学计数法的数字转换成数值？

excel里如何的科学计数法的数字转换成数值？

比如下图&#xff0c;要想把它们转换成3250跟1780&#xff0c;有什么快捷的办法吗&#xff1f; 科学计数法在excel里的格式&#xff0c;与我们常规在数学上写的有差异。这个转换可以这样做&#xff1a; 1.转换后的效果&#xff1a; 2.问题分析 题目中所附截图&#xff0c;单元…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023