​在HTML中基于JS和CSS实现的一款天气预报小组件Widgets

    在HTML中基于JS和CSS实现的一款天气预报小组件Widgets，具有两种模式：简约模式和扩展模式，这两种模式可通过点击内容进行切换。在简约模式下，只显示城市名、当前温度和天气状况；在扩展模式下，会显示更多详细信息，如风速、能见度、空气质量、湿度等。当从简约模式切换到扩展模式时，温度数值会滑动到其他数据旁边，创造出动态的效果。

实现过程

1. HTML结构：使用HTML元素表示各个天气信息，包括城市名、日期、天气状况、温度和其他数据。

2. CSS样式：利用CSS3的transition属性，控制温度数值的滑动效果。通过设置适当的transform值，使温度数值平滑地向右移动。

3. JavaScript交互：通过JavaScript监听用户的点击事件，触发视图的切换。

4. 动画效果：结合CSS3的@keyframes规则，创建复杂的动画序列，确保视图切换过程流畅自然。

这款“Weather Widgets”不仅提供了实用的天气信息，还通过创新的交互方式提升了用户体验，使其在众多天气显示网页中独树一帜。