.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%,
93.3% 25%,
78.87% 50%,
93.3% 75%,
64.43% 75%,
50% 100%,
35.57% 75%,
6.7% 75%,
21.13% 50%,
6.7% 25%,
35.57% 25%
);
z-index: 1;
animation: sunScale 2s linear infinite;/*实现动画*/
}
@keyframes sunScale {
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
.cloudy:before,.rainy:before,.snowy:before{
content: "";
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
z-index: 2;
box-shadow: #fff 22px -15px 0 6px,
#fff 57px -6px 0 2px,
#fff 87px 4px 0 -4px,
#fff 33px 6px 0 6px,
#fff 61px 6px 0 2px,
#ccc 29px -23px 0 6px,
#ccc 64px -14px 0 2px,
#ccc 94px -4px 0 -4px;
}
/*box-shadow: h-shadow v-shadow blur spread color inset;
参数详解:
h-shadow: 阴影的水平偏移量。
v-shadow: 阴影的垂直偏移量。
blur: 模糊距离(就是渐变的距离,设为0就没有渐变)。
spread: 投影的尺寸,通过这个控制“影分身”的大小。
color: 投影颜色,通过这个实现后方的乌云。
inset: 改为内阴影。这里用不到。*/
.cloudy:before{
animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
0%{
transform: translate(-50%,-50%);
}
50%{
transform: translate(-50%,-60%);
}
100%{
transform: translate(-50%,-50%);
}
}
.rainy:after {
/*这里使用 :after 伪类实现雨滴。
先实现一个雨滴(为方便观看,暂时隐藏云朵):*/
content: "";
position: absolute;
top:50%;
left: 25%;
width: 4px;
height: 14px;
background: #fff;
border-radius: 2px;
/*然后通过box-shadow“影分身”:*/
box-shadow:
#fff 25px -10px 0,
#fff 50px 0 0,
#fff 75px -10px 0,
#fff 0 25px 0,
#fff 25px 15px 0,
#fff 50px 25px 0,
#fff 75px 15px 0,
#fff 0 50px 0,
#fff 25px 40px 0,
#fff 50px 50px 0,
#fff 75px 40px 0;
animation: rainDrop 2s linear infinite;
}
@keyframes rainDrop {
0% {
transform: translate(0,0) rotate(10deg);
}
100% {
transform: translate(-4px,24px) rotate(10deg);
box-shadow:
#fff 25px -10px 0,
#fff 50px 0 0,
#fff 75px -10px 0,
#fff 0 25px 0,
#fff 25px 15px 0,
#fff 50px 25px 0,
#fff 75px 15px 0,
rgba(255,255,255,0) 0 50px 0,
rgba(255,255,255,0) 25px 40px 0,
rgba(255,255,255,0) 50px 50px 0,
rgba(255,255,255,0) 75px 40px 0;
}
}
.snowy:after {
content: "";
position: absolute;
top: 50%;
left: 25%;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
box-shadow:
#fff 25px -10px 0,
#fff 50px 0 0,
#fff 75px -10px 0,
#fff 0 25px 0,
#fff 25px 15px 0,
#fff 50px 25px 0,
#fff 75px 15px 0,
#fff 0 50px 0,
#fff 25px 40px 0,
#fff 50px 50px 0,
#fff 75px 40px 0;
animation: snowDrop 2s linear infinite;
}
@keyframes snowDrop {
0% {
transform: translateY(0);
}
100% {
transform: translateY(25px);
box-shadow:
#fff 25px -10px 0,
#fff 50px 0 0,
#fff 75px -10px 0,
#fff 0 25px 0,
#fff 25px 15px 0,
#fff 50px 25px 0,
#fff 75px 15px 0,
rgba(255,255,255,0) 0 50px 0,
rgba(255,255,255,0) 25px 40px 0,
rgba(255,255,255,0) 50px 50px 0,
rgba(255,255,255,0) 75px 40px 0;
}
}
https://mp.weixin.qq.com/s?__biz=MzA5MjQ0Mjk2NA==&mid=2247484765&idx=1&sn=f9ea87dea436fc3392f731491d9c8507&chksm=906c5d66a71bd470588069025888cb6cb87551a0a878245d2e2ba8c98bba40087993ebd25481&mpshare=1&scene=1&srcid=&sharer_sharetime=1564704745722&sharer_shareid=5c25a9bf1f137b3812e262b3174891a5&key=f6d26f92f2a2f56d0259e23dac5cfbce8ca819190772aa3c79663cee09c87c4c68cfa49d7ba338a890e2f4b2474f82f1313c2775c2cd588a641b1fdff422dffe834339fcee6b18f6a1fbd912ed7a20ad&ascene=1&uin=MTQ2OTA3MTkwNQ%3D%3D&devicetype=Windows+7&version=62060833&lang=zh_CN&pass_ticket=QgFeq12VxyQlMfi4nUypDPFz%2F3AgcPmoOgvDpcolxJOcIhpVdThdrDbhO%2BwwwKfh