【每日一练】33—CSS 3D 搜索框的 UI 实现效果

最新推荐文章于 2024-02-19 09:03:50 发布

web前端开发V

最新推荐文章于 2024-02-19 09:03:50 发布

阅读量132

点赞数

文章标签： css html js vue javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649129958&idx=3&sn=cc078da167d83856275e7b0cb2c00cb9&chksm=be58a44b892f2d5d9bc190c61405c9b10b3f203a9f555ed4d890d4a26b698ab1243d6673cd08&scene=126&&sessionid=0

版权

写在前面

今天练习的这个效果是一个3D搜索框，这个搜索功能的需求几乎在每个项目中都会遇到，而搜索功能的主要目的就是便于我们查找需要的内容，因此，我们在很多项目中，都会将其放在显眼的位置，同时，又不想让它占据太多页面位置，那怎么办呢？因此，我们就想到让其占一个小位置，在需要的时候进行加载，这个就是我们今天练习的小项目内容。

现在，我们一起来看一下它的最终效果：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>【每日一练】33—CSS 3D 搜索框的 UI 实现效果</title>
</head>
<body>
  <div class="inputBox">
    <div class="shadow"></div>
    <input type="text" placeholder="输入你需要查找的内容">
    <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>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: consolas;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #cfd1e1;
}
.inputBox
{
  position: relative;
  width: 65px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
.inputBox:hover 
{
  width: 400px;
}
.inputBox::before 
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  z-index: 1;
  background: linear-gradient(#fff,#fff,#e3e3e3);
  filter: blur(1px);
}
.inputBox::after 
{
  content: '';
  position: absolute;
  top: 1px;
  right: -1px;
  width: 10px;
  height: 100%;
  z-index: 1;
  background:#9d9d9d;
  filter: blur(1px);
}
.shadow
{
  content: '';
  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);
  overflow: hidden;
  pointer-events: none;
}
.shadow::before 
{
  content: '';
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  background: #cfd1e1;
  z-index: 1;
}
.inputBox input 
{
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  padding: 10px 25px;
  outline: none;
  font-size: 1.1em;
  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;
}
.inputBox input,
.inputBox input::placeholder
{
  color: transparent;
}
.inputBox:hover input,
.inputBox:hover input::placeholder
{
  color: #555;
}
ion-icon
{
  position: absolute;
  right: 20px;
  font-size: 1.5em;
  cursor: pointer;
  color: #555;
}

写在最后

到今天，我们进行了33个小项目的练习了，不知道你坚持了没有，后面我们可能会做一些静态页面的练习了，每天尝试着去练习一些简单的静态页面。

其实，写页面真的就好像小孩子玩乐高搭积木一样，我们把每块内容练习学会后，然后，再通过一步一步的拼装，把需要的内容装到页面的盒子里，最终，就会出来一个静态页面的效果，最后，再根据自己需要的样子，慢慢调整CSS样式，就算你不会设计，按照一定规则写出来的页面也不会太差。

当然，如果想要视觉效果好，提升美感，这个也需要我们平日里多提升自己的审美能力。

总之，多看，多练，把自己看到的，认为好的东西，都去实现一遍，然后再通过自我不断改善。

好了，以上就是我今天跟你分享的【每日一练】的全部内容，希望你能有所收获，如果你觉得我今分享的内容对你有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】33—CSS 3D 搜索框的 UI 实现效果

写在前面今天练习的这个效果是一个3D搜索框，这个搜索功能的需求几乎在每个项目中都会遇到，而搜索功能的主要目的就是便于我们查找需要的内容，因此，我们在很多项目中，都会将其放在显眼的位置，同时，又不想让它占据太多页面位置，那怎么办呢？因此，我们就想到让其占一个小位置，在需要的时候进行加载，这个就是我们今天练习的小项目内容。现在，我们一起来看一下它的最终效果：HTML代码：&l...
复制链接

扫一扫