下拉菜单过渡
下拉过渡，利用Y轴的transform：scaleY(0) —》transform：scaleY(1)
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background-color: #f4f4f4;}.text-select {width: 300px;/* background: #fff; *//* border-radius: 8px; *//* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */overflow: hidden;position: relative;}.text-select .text {width: 100%;padding: 10px;border: 1px solid #ddd;border-bottom: none;/* border-radius: 8px 8px 0 0; */box-sizing: border-box;font-size: 16px;transition: border-color 0.3s ease;}.text-select .text:focus {border-color: #007BFF;outline: none;}.text-select .select {border: 1px solid #ddd;border-top: none;background: #fff;border-radius: 0 0 8px 8px;overflow: hidden;transform-origin: top;transform: scaleY(0);transition: transform 0.3s ease;z-index: 1;}.text-select .select span {display: block;padding: 10px;font-size: 14px;color: #333;cursor: pointer;transition: background-color 0.3s ease;}.text-select .select span:hover {background-color: #f0f0f0;}.text-select .text:focus ~ .select {transform: scaleY(1);}</style>
</head>
<body><div class="text-select"><input type="text" class="text" placeholder="Select an option..." /><div class="select"><span>Option 1</span><span>Option 2</span><span>Option 3</span><span>Option 4</span><span>Option 5</span></div></div>
</body>
</html>```