在输入焦点上移动占位符/设置占位符动画

基础概念

占位符（Placeholder）通常用于表单控件中，显示提示信息，指导用户输入内容。当用户开始输入时，占位符会消失，显示用户输入的内容。移动占位符是指在用户输入过程中，占位符的位置或样式发生变化。设置占位符动画则是指为占位符添加动态效果，以提升用户体验。

类型

文本占位符：最常见的类型，用于提示用户输入文本。
图片占位符：用于提示用户上传图片。
选择占位符：用于提示用户进行选择操作。

应用场景

表单输入：在注册、登录、搜索等表单中使用。
图片上传：在需要用户上传图片的地方使用。
选项选择：在下拉菜单或选项卡中使用。

示例代码（HTML + CSS）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Placeholder Animation</title>
    <style>
        input {
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
        input:focus::placeholder {
            color: #007bff;
            animation: placeholderFadeOut 0.5s forwards;
        }
        @keyframes placeholderFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
    </style>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username">
    </form>
</body>
</html>