使用 HTML、CSS 和 JavaScript 实现一个具有动画效果的下拉菜单，点击输入框时显示选项列表，鼠标悬停在选项上时自动将选项内容填入输入框中。
本题要求实现一个交互式下拉菜单组件，具备以下功能：
页面加载后显示一个只读输入框，提示用户“选择你擅长的技能”
点击输入框时，下方会以平滑动画方式展开技能选项列表
鼠标悬停在任一选项上时，该选项的文本会立即显示在输入框中
再次点击输入框可收起选项列表
下拉箭头图标在展开 / 收起状态时有旋转动画效果
该实现结合了：
HTML 结构搭建
CSS 样式设计（包括定位、过渡动画、伪元素）
JavaScript 事件处理（点击切换状态、鼠标悬停更新值）
页面初始状态：显示一个带下拉箭头的输入框，内容为 "选择你擅长的技能"
点击输入框：箭头动画旋转，下方平滑展开包含 HTML、CSS、JavaScript、ReactJS、VueJS 的选项列表
鼠标悬停在 "JavaScript"选项上：输入框内容立即变为"JavaScript"
再次点击输入框：选项列表平滑收起，箭头恢复原始状态
结构设计：
使用 .dropdown 容器包裹输入框和选项列表
选项列表默认隐藏（visibility: hidden; opacity: 0）
通过 active 类控制展开 / 收起状态
动画实现：
箭头使用两个伪元素（::before 和 ::after）模拟
通过改变 right 值实现箭头旋转效果
选项列表使用 opacity 和 visibility 配合 transition 实现淡入淡出
交互逻辑：
点击事件切换 active 类
鼠标悬停事件调用 show() 函数更新输入框值
输入框设置为只读防止用户手动编辑
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>动画下拉菜单效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #f9f9f9;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: '';
position: absolute;
top: 25px;
right: 28px;
width: 12px;
height: 2px;
background: #555;
transform: rotate(40deg);
z-index: 10;
transition: 0.5s;
}
.dropdown.active::before {
right: 20px;
}
.dropdown::after {
content: '';
position: absolute;
top: 25px;
right: 20px;
width: 12px;
height: 2px;
background: #555;
transform: rotate(-40deg);
z-index: 10;
transition: 0.5s;
}
.dropdown.active::after {
right: 28px;
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 16px;
background: #fff;
text-transform: capitalize;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
outline: none;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow: 0 30px 30px rgba(0,0,0,0.05);
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: 0.25s;
}
.dropdown.active .option {
visibility: visible;
opacity: 1;
}
.dropdown .option div {
padding: 12px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
</style>
</head>
<body>
<div class="dropdown">
<input type="text" class="text2" readonly placeholder="选择你擅长的技能">
<div class="option">
<div onmouseover="show('html')">HTML</div>
<div onmouseover="show('CSS')">CSS</div>
<div onmouseover="show('JavaScript')">JavaScript</div>
<div onmouseover="show('ReactJS')">ReactJS</div>
<div onmouseover="show('VueJS')">VueJS</div>
</div>
</div>
<script>
function show(a){
document.querySelector('.text2').value = a;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function(){
dropdown.classList.toggle('active')
}
</script>
</body>
</html>这是一个典型的前端 UI 组件实现案例，展示了现代 Web 开发中常见的交互模式。虽然原生 <select> 元素可以实现类似功能，但自定义下拉菜单提供了更高的样式自由度和交互控制能力。
该实现有几点值得注意的细节：
使用 text-transform: capitalize 确保首字母大写显示
通过 box-shadow 创建轻微的阴影效果增强立体感
过渡动画时间精心调整（箭头0.5s，选项0.25s）创造流畅体验
选项悬停时使用蓝色背景（#62baea）提供清晰的视觉反馈
这种组件在实际项目中非常常见，常用于表单选择、导航菜单等场景。掌握此类实现有助于理解 DOM 操作、CSS 动画和事件处理的核心概念。