分享一组天气组件

先看效果：

CSS部分代码（查看更多）：

    <style>:root {--bg-color: #E9F5FA;--day-text-color: #4DB0D3;/* 多云 */--cloudy-background: #4DB0D3;--cloudy-temperature: #E6DF95;--cloudy-content: #D3EBF4;/* 晴 */--sunny-background: #E6DF95;--sunny-temperature: #4DB0D3;--sunny-content: #247490;/* 暴风雨 */--stormy-background: #0E2E3A;--stormy-temperature: #E6DF95;--stormy-content: #D3EBF4;/* 雪 */--snowy-background: #BCE1EF;--snowy-temperature: #0E2E3A;--snowy-content: #247490;/* 雨 */--rainy-background: #4DB0D3;--rainy-temperature: #E6DF95;--rainy-content: #D3EBF4;/* 部分多云 */--partly-cloudy-background: #2B8BAD;--partly-cloudy-temperature: #E6DF95;--partly-cloudy-content: #D3EBF4;}* {box-sizing: border-box;color: var(--mine-shaft);font-family: 'Krona One', sans-serif;margin: 0;padding: 0;}body {align-items: center;background: var(--bg-color);display: flex;justify-content: center;min-height: 100vh;padding: 1rem;}.main {display: flex;gap: 36px;justify-content: center;max-width: 100%;width: 1440px;}.item {display: flex;flex-direction: column;flex: 1;max-width: 165px;}.item__date {color: var(--day-text-color);font-size: 24px;font-weight: 400;letter-spacing: 0.2em;line-height: 30px;text-align: center;text-transform: uppercase;}.item__day {color: var(--day-text-color);font-size: 73px;font-weight: 400;line-height: 92px;margin-bottom: 14px;text-align: center;}.item__forecast-container {align-items: center;border-radius: 50px;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 11px 4px 34px rgba(32, 77, 92, 0.7);display: flex;flex-direction: column;min-height: 525px;padding-bottom: 14px;padding-top: 16px;}.item__forecast-image {flex: 1;position: relative;width: 100%;}.item__forecast-value {font-family: 'Oswald', sans-serif;font-size: 110px;font-weight: 400;line-height: 163px;margin-bottom: 27px;position: relative;}.item__forecast-value::before {border: 5px solid currentColor;border-radius: 50%;content: '';height: 10px;position: absolute;right: -22px;top: 22px;width: 10px;}.item__forecast-precipitation,.item__forecast-low {align-items: center;display: flex;font-size: 16px;font-weight: 400;gap: 8px;line-height: 20px;margin-bottom: 10px;}/* 多云 */.cloudy .item__forecast-container {background-color: var(--cloudy-background);}.cloudy .item__forecast-value {color: var(--cloudy-temperature);}.cloudy .item__forecast-precipitation,.cloudy .item__forecast-low {color: var(--cloudy-content);}.cloudy .item__forecast-image {left: 15px;width: 264px;}/* 晴天 */.sunny .item__forecast-container {background-color: var(--sunny-background);}.sunny .item__forecast-value {color: var(--sunny-temperature);}.sunny .item__forecast-precipitation,.sunny .item__forecast-low {color: var(--sunny-content);}.sunny .item__forecast-image {width: 208px;}/* 暴雨 */.stormy .item__forecast-container {background-color: var(--stormy-background);}.stormy .item__forecast-value {color: var(--stormy-temperature);}.stormy .item__forecast-precipitation,.stormy .item__forecast-low {color: var(--stormy-content);}.stormy .item__forecast-image {left: 18px;width: 246px;}/* 雪天 */.snowy .item__forecast-container {background-color: var(--snowy-background);}.snowy .item__forecast-value {color: var(--snowy-temperature);}.snowy .item__forecast-precipitation,.snowy .item__forecast-low {color: var(--snowy-content);}.snowy .item__forecast-image {left: 6px;width: 230px;}/* 部分多云 */.partly-cloudy .item__forecast-container {background-color: var(--partly-cloudy-background);}.partly-cloudy .item__forecast-value {color: var(--partly-cloudy-temperature);}.partly-cloudy .item__forecast-precipitation,.partly-cloudy .item__forecast-low {color: var(--partly-cloudy-content);}.partly-cloudy .item__forecast-image {left: 14px;width: 230px;}/* 雨天 */.rainy .item__forecast-container {background-color: var(--rainy-background);}.rainy .item__forecast-value {color: var(--rainy-temperature);}.rainy .item__forecast-precipitation,.rainy .item__forecast-low {color: var(--rainy-content);}.rainy .item__forecast-image {left: 25px;top: -30px;width: 160px;}</style>