CSS 扩展悬停搜索栏

代码De搬运工

已于 2022-02-10 22:17:13 修改

阅读量374

点赞数

分类专栏：笔记文章标签： css css3 html

于 2022-01-27 14:56:20 首次发布

本文链接：https://blog.csdn.net/m0_46577631/article/details/122717794

版权

笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

在这里插入图片描述

CSS实现搜索框悬停扩展

      <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输入框悬浮</title>
<style>
   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: consolas;
   }
   body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
     background: #cfd1e1;
      overflow: hidden;
   }
   .searchBox{
      position: relative;
      width: 65px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.5s;
   }
   .searchBox:hover{
      width: 400px;
   }
   .searchBox::before{
      content: '';
      position: absolute;
      top:0;
      left: 0;
      width: 10px;
      height: 100%;
      background: linear-gradient(#fff,#fff,#e3e3e3);
      z-index: 1;
      filter: blur(1px);
   }
   .searchBox::after{
      content: '';
      position: absolute;
      top:0;
      right: -1px;
      width: 10px;
      height: 100%;
      background:#9d9d9d;
      z-index: 1;
      filter: blur(1px);
   }
   .shadow{
      position: absolute;
      top:0;
      left: -50px;
      width: calc(100% + 50px);
      height: 300px;
      background: linear-gradient(180deg,rgba(0,0,0,0.1),
      transparent,transparent);
      transform-origin: top;
      transform: skew(45deg);
      pointer-events:none
   }
   .shadow::before{
       content: '';
       position: absolute;
       width: 50px;
       height: 50px;
       background: #cfd1e1;
       z-index:1;
   }
   .searchBox input{
      position: relative;
      width: 100%;
      height: 100%;
      border: none;
      padding: 10px 25px;
      outline: none;
      font-size: 15px;
      color: #555;
      background: linear-gradient(#dbdae1,#a3aaba);
      box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
      15px 15px 15px rgba(0,0,0,0.1),
      20px 20px 15px rgba(0,0,0,0.1),
      30px 30px 15px rgba(0,0,0,0.1),
      inset 1px 1px 2px #fff
   }
   .searchBox input::placeholder,
   .searchBox input
   {
       color: transparent;
   }
   .searchBox:hover input::placeholder,
   .searchBox:hover input
   {
     color:#555
   }
   ion-icon{
        position: absolute;
        right: 25px;
   }
</style>
</head>
<body>
<div class="searchBox">
     <div class="shadow"></div>
	   <input type="text" placeholder="Search Anything You Want...">
     <ion-icon name="search-outline"></ion-icon>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
// 另外不知道咋么使用<ion-icon>这个标签图标的小伙伴请移步菜鸟了解=====>
https://www.runoob.com/ionic/ionic-icon.htmlhttps://www.runoob.com/ionic/ionic-icon.html

代码De搬运工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 扩展悬停搜索栏

<!doctype html><html><head><meta charset="utf-8"><title>输入框悬浮</title><style> *{ margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body{ displa...
复制链接

扫一扫