html中怎么写一个天气预报,纯CSS实现天气预报

CSS实现天气

.weather{

position: relative;

display: inline-block;

width: 180px;

height: 240px;

background: #23b7e5;

border-radius: 8px;

}

.sunny:before{

content: "";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%); /*定位、旋转等*/

width: 60px;

height: 60px;

background: #F6D963;

border-radius: 50%;

box-shadow: 0 0 20px #ff0; /*阴影-外发光效果；水平-上下-大小-颜色*/

z-index: 2;/*设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；分层显示*/

}

.sunny:after{

content: "";

position: absolute;

top: 50%;

left: 50%;

margin: -45px 0 0 -45px;

width: 90px;

height: 90px;

background: #FFEB3B;

clip-path: polygon(  /*绘制图形*/

50% 0%,

65.43% 25%,