如何实现搜索栏placeholder滚动播放效果
时间: 2024-03-19 19:45:50 浏览: 23
要实现搜索栏placeholder滚动播放效果,可以使用CSS3动画和JavaScript实现。
首先,使用CSS3动画来实现placeholder的滚动效果,可以使用以下代码:
```css
.search-input {
animation: placeholder 10s linear infinite;
}
@keyframes placeholder {
0% {
opacity: 1;
}
20% {
opacity: 0;
}
40% {
content: "Search for...";
opacity: 1;
}
60% {
content: "Find what you need...";
opacity: 1;
}
80% {
content: "Explore your interests...";
opacity: 1;
}
100% {
content: "Try me now...";
opacity: 1;
}
}
```
上述代码中,使用了`animation`属性来定义动画效果,`placeholder`是动画名称,`10s`表示动画持续时间为10秒,`linear`表示动画速度为匀速,`infinite`表示动画无限循环。
接下来,使用JavaScript来实现placeholder的动态替换,可以使用以下代码:
```javascript
const placeholder = document.querySelector('.search-input').getAttribute('placeholder');
const phrases = ['Search for...', 'Find what you need...', 'Explore your interests...', 'Try me now...'];
let i = 0;
setInterval(() => {
document.querySelector('.search-input').setAttribute('placeholder', phrases[i]);
i = (i + 1) % phrases.length;
}, 10000);
```
上述代码中,使用`setInterval`函数来定时替换placeholder内容,`10000`表示每隔10秒替换一次。在替换时,将`phrases`数组中的内容依次赋值给placeholder,使用取余的方式实现数组循环。
以上就是实现搜索栏placeholder滚动播放效果的方法,希望能对你有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)