[分享]css动画搜索框从右向左出现

CSS动画以其简单易用和样式表控制的特性，成为创建动态网页效果的利器。本文介绍如何使用CSS动画创建搜索框从右向左出现的效果。 .searchbox{ width: 100px; height: 30...

CSS动画以其简单易用和样式表控制的特性，成为创建动态网页效果的利器。本文介绍如何使用CSS动画创建搜索框从右向左出现的效果。

 .search-box{
       width: 100px;
       height: 30px;
       background-color: white;
       position: absolute;
       top: 50%;
       right: -110px;
       transform: translateY(-50%);
       transition: right .5s ease-in-out;
   }
   .search-box.active{
       right: 10px;
   } 

以上是CSS代码部分，首先为搜索框设置了一些基础样式，如宽度、高度、背景色等。接着将搜索框设置为绝对定位，顶部偏移50%，右侧偏移-110px，这样搜索框就显示在页面右侧隐藏了。

当需要显示时，进行状态切换，添加一些CSS类名，这时搜索框就出现在页面上了，因为我们在CSS代码中设置了搜索框的右侧偏移值在 .5s 的时间内动画移动到10px的位置。

 .search-box:hover{
       cursor: pointer;
   } 

可以通过为搜索框的hover事件添加CSS代码，让鼠标指针变为手型。

至此，我们已经成功创建了搜索框从右向左出现的效果。您可以根据需要进行进一步的自定义设置。