input输入内容时图标出现动画
时间: 2024-05-13 16:17:43 浏览: 8
如果你想让输入框中的图标有动画效果,可以通过CSS实现。以下是一个简单的示例:
HTML代码:
```html
<div class="input-container">
<input type="text" placeholder="请输入内容">
<i class="icon"></i>
</div>
```
CSS代码:
```css
.input-container {
position: relative;
}
.input-container input {
width: 100%;
padding: 10px 40px 10px 10px;
border: none;
border-bottom: 2px solid #ccc;
outline: none;
}
.input-container .icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('your-icon-url');
background-size: cover;
transition: all 0.3s ease;
}
.input-container input:focus + .icon {
transform: translateY(-50%) rotate(360deg);
}
```
这段代码使用了CSS的过渡效果(transition),当输入框被聚焦时(:focus),图标会向右旋转360度。你需要将“your-icon-url”替换为你的图标的URL。