css3工作日天气预报动画

CSS3工作日天气预报动画是一种非常酷炫的效果，它可以让用户在查看天气的同时也感受到一些舒适和愉悦。这个动画可以使用CSS3的一些新特性，如动画和渐变来创建，下面就来看一下如何实现这个动画效果。

.weather-wrapper{
  width: 400px;
  height: 400px;
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.weather{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.weather-icon{
  font-size: 120px;
  color: #f7c244;
  margin-bottom: 30px;
}

.weather-text{
  font-size: 30px;
  color: #444444;
  margin-bottom: 10px;
}

.weather-temp{
  font-size: 50px;
  color: #666666;
}

.sunshine{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #f7c244;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  animation: sunny 3s linear alternate infinite;
}

.cloud{
  width: 100px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 10px;
  position: absolute;
  right: -100px;
  top: 30px;
  animation: cloudy 6s linear alternate infinite;
}

@keyframes sunny{
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(20px);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes cloudy{
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(-10px);
  }
  100%{
    transform: translateX(0);
  }
}

css3工作日天气预报动画

首先，我们在HTML中创建一个包裹天气信息的容器，并且使用CSS设置了它的基本样式，如背景色、圆角等。接下来，在容器中添加一个`.weather`类，用来显示天气信息，包括天气图标、天气文字和温度数字。这里我们使用了FlexBox布局来使文本垂直居中对齐，并且让它们以列的形式显示。

然后，在容器上方添加了一个`.sunshine`类，表示阳光的圆形图标，并且设置了动画来让它呈现出往返运动的效果。最后，我们添加了一个`.cloud`类，表示云朵的图标，同样使用动画来设置云朵的动态效果。

通过以上的CSS代码，我们可以实现一个非常生动的天气预报动画，不仅能够让用户了解到天气信息，同时还可以展现出一些美好的元素，增加用户的愉悦感。

css3工作日天气预报动画

相关文章