css画天气
太阳
<view
class="weather">
<view
class="sun">
<view
class="raw"></view
>
<view
class="raws"></view
>
</view
>
</view
>
.weather
{
width
: 130rpx
;
height
: 130rpx
;
background
: white
;
text
-align
: center
;
padding
-top
: 45rpx
;
padding
-left
: 45rpx
;
}
.sun
{
width
: 40rpx
;
height
: 40rpx
;
background
: rgba(245, 241, 8, 0.801);
box
-shadow
: 0 0 0 10rpx orange
;
border
-radius
: 50%;
animation
: spin
12s infinite linear
;
}
.raw
{
display
: block
;
width
: 10rpx
;
height
: 30rpx
;
margin
-left
: 15rpx
;
background
: orange
;
border
-radius
: 80rpx
;
box
-shadow
: 0 110rpx orange
;
top
: -50rpx
;
position
: absolute
;
}
.raws
{
display
: block
;
width
: 10rpx
;
height
: 30rpx
;
margin
-left
: 15rpx
;
background
: orange
;
border
-radius
: 80rpx
;
box
-shadow
: 0 110rpx orange
;
top
: 7rpx
;
position
: absolute
;
transform
: rotate(90deg
);
left
: 56rpx
;
}
@keyframes spin
{
100% {
-webkit
-transform
: rotate(360deg
);
transform
: rotate(360deg
);
}
}
下雨
<view
class="test">
<view
class="cloud">
<view
class="rain"></view
>
</view
>
</view
>
.cloud
{
width
: 50rpx
;
height
: 50rpx
;
border
-radius
: 50%;
background
-color
: black
;
box
-shadow
: black
65rpx
-15rpx
0 -5rpx
,black
25rpx
-25rpx
, black
30rpx
10rpx
,black
60rpx
15rpx
0 -10rpx
,black
85rpx
5rpx
0 -5rpx
;
margin
: 30rpx
;
padding
-left
: 49rpx
;
padding
-top
: 20rpx
;
}
.rain
{
width
: 200rpx
;
height
: 100rpx
;
}
.rain
:after
{
content
: '';
position
: absolute
;
z
-index
: 999;
width
: 20rpx
;
height
: 20rpx
;
background
: #
0cf
;
border
-radius
: 100% 0 60% 50% / 60% 0 100% 50%;
box
-shadow
: 0.625em
0.875em
0 -0.125em
rgba(255,255,255,0.2), -0.875em
1.125em
0 -0.125em
rgba(255,255,255,0.2), -1.375em
-0.125em
0 rgba(255,255,255,0.2);
-webkit
-transform
: rotate(-28deg
);
transform
: rotate(-28deg
);
-webkit
-animation
: rain
3s linear infinite
;
animation
: rain
3s linear infinite
;
}
@keyframes rain
{
0% {
background
: #
0cf
;
box
-shadow
:
0.625em
0.875em
0 -0.125em
rgba(255,255,255,0.2),
-0.875em
1.125em
0 -0.125em
rgba(255,255,255,0.2),
-1.375em
-0.125em
0 #
0cf
;
}
25% {
box
-shadow
:
0.625em
0.875em
0 -0.125em
rgba(255,255,255,0.2),
-0.875em
1.125em
0 -0.125em #
0cf
,
-1.375em
-0.125em
0 rgba(255,255,255,0.2);
}
50% {
background
: rgba(255,255,255,0.3);
box
-shadow
:
0.625em
0.875em
0 -0.125em #
0cf
,
-0.875em
1.125em
0 -0.125em
rgba(255,255,255,0.2),
-1.375em
-0.125em
0 rgba(255,255,255,0.2);
}
100% {
box
-shadow
:
0.625em
0.875em
0 -0.125em
rgba(255,255,255,0.2),
-0.875em
1.125em
0 -0.125em
rgba(255,255,255,0.2),
-1.375em
-0.125em
0 #
0cf
;
}
}
下雪
<view
class="test">
<view
class="cloud">
<view
class="snow"></view
>
<view
class="snow2"></view
>
<view
class="snow3"></view
>
</view
>
</view
>
.snow
{
width
: 200rpx
;
height
: 100rpx
;
z
-index
: 999;
}
.snow2
{
width
: 200rpx
;
height
: 100rpx
;
z
-index
: 999;
}
.snow3
{
width
: 200rpx
;
height
: 100rpx
;
z
-index
: 999;
margin
-left
: -40rpx
;
}
.snow
:after
{
margin
: 0.375em
0 0 0.125em
;
font
-size
: 2em
;
opacity
: 0.4;
animation
: spin
16s linear infinite reverse
;
content
: '\2745';
position
: absolute
;
color
: blue
;
}
.snow2
:after
{
margin
: -130rpx
0 0 0;
font
-size
: 2em
;
opacity
: 0.4;
animation
: spin
16s linear infinite reverse
;
content
: '\2745';
position
: absolute
;
color
: blue
;
}
.snow3
:after
{
margin
: -205rpx
0 -200rpx
0;
font
-size
: 2em
;
opacity
: 0.4;
animation
: spin
16s linear infinite reverse
;
content
: '\2745';
position
: absolute
;
color
: blue
;
}
@keyframes spin
{
0% {
transform
:rotate(90deg
);
}
25% {
transform
:rotate(180deg
);
}
50% {
transform
:rotate(270deg
);
}
100% {
transform
:rotate(360deg
);
}
}
