css画天气

css画天气

太阳

// css画太阳
<view class="weather">
        <view class="sun">
            <view class="raw"></view>
            <view class="raws"></view>
        </view>
</view>


// css部分
.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>


// css部分
.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>

// css部分
.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);
  }
}