纯css写一个大太阳的天气图标的方法示例-前端开发

下面是“纯css写一个大太阳的天气图标的方法示例”的完整攻略：

下面是“纯css写一个大太阳的天气图标的方法示例”的完整攻略：

一、准备工作

在开始之前，你需要先准备好以下内容：

一个文本编辑器，如VSCode或Sublime Text。
一个支持CSS3的浏览器，如Google Chrome、Firefox等。
一个基本的HTML文件，用于容纳并展示该图标。

二、开始制作

1. 设置基本样式

在HTML文件中，我们首先需要创建一个容器，并对该容器设置一些基本样式，为后续的制作打下基础：

<div class="weather-icon sunny">
  <div class="sun"></div>
</div>

.weather-icon {
  width: 120px;  /* 设置容器宽度 */
  height: 120px; /* 设置容器高度 */
  position: relative; /* 设置相对定位，方便后续用于定位元素 */
}

.sunny .sun {
  position: absolute; /* 设置绝对定位 */
  top: 15px; /* 上部间距 */
  left: 15px; /* 左侧间距 */
  width: 90px; /* 太阳宽度 */
  height: 90px; /* 太阳高度 */
  border-radius: 50%; /* 圆形 */
  border: 15px solid #fff; /* 白色边框 */
  box-shadow: 0 0 0 15px #FDB813, 0 0 0 20px #FFD948; /* 黄色和淡黄色渐变外阴影 */
}

2. 制作太阳

接下来，我们需要使用CSS3中的“box-shadow”属性来制作太阳的光芒：

.box {
  box-shadow: 0 0 0 15px #FDB813, 0 0 0 20px #FFD948;
}

这里采用了两个不同大小和不同颜色的色块，借助较大的色块制造出了“内敛”的效果。同时，由于圆形元素设置为了有白色边框的圆形，因此box-shadow属性的实际表现效果是在边框之外，形成一个“光晕”效果。

3. 完成图标

通过以上的制作方法，我们就成功地用纯CSS制作出了一个非常不错的大太阳天气图标。你可以在HTML文件中引用这段CSS样式代码，然后将相应的元素以及类名引用到你的页面中，即可直接使用。

三、示例说明

示例1：制作多个太阳并附带动画效果

为了让这个图标变得更加有趣和生动，我们可以为其添加一些CSS3动画效果，比如先前提到的旋转、变形等效果。例如下面这个示例，制作了多个太阳，并在其上基于CSS3的动画效果加以装饰：

<div class="weather-icons">
  <div class="sun-icon">
    <div class="sun"></div>
    <div class="rays"></div>
  </div>
  <div class="sun-icon">
    <div class="sun"></div>
    <div class="rays"></div>
  </div>
  <div class="sun-icon">
    <div class="sun"></div>
    <div class="rays"></div>
  </div>
</div>

.weather-icons {
  display: flex; /* 设置为flex布局 */
  justify-content: center; /* 水平居中 */
}

.sun-icon {
  position: relative;
  width: 120px; /* 宽高大小相同 */
  height: 120px;
  margin: 20px; /* 设置间隔 */
  animation: 3s linear infinite rotate; /* 添加动画效果 */
}

.sun {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 15px solid #fff;
  box-shadow: 0 0 0 15px #FDB813, 0 0 0 20px #FFD948;
}

.rays {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top: 10px solid #FFD948;
  box-shadow: 0 0 0 10px #FDB813;
  opacity: 0.5;
  animation: 3s linear infinite transform;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes transform {
  0% {
    transform: scale(0.3);
    opacity: 0.3;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.3);
    opacity: 0.3;
  }
}

在这个示例中，我们添加了一个名为“weather-icon”的容器，里面包含了多个名为“sun-icon”的套件，核心是用CSS3光顾到制作出的太阳及其辐射。这里的关键是用了CSS3的“rotate”和“transform”等动画属性，在做动画时用“@keyframes”语法定义属性变化，实现旋转以及太阳光芒的大小变化等效果。

示例2：根据不同天气类型制作背景不同的图标

这个示例中，我们通过一些简单的CSS样式规则判断天气类型，并根据不同的天气类型给图标设置不同的背景、阴影等效果。

<div class="weather-icon sunny">
  <div class="sun"></div>
</div>

.weather-icon {
  width: 150px;
  height: 150px;
  position: relative;
}

.sunny .sun {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 20px solid #fff;
  box-shadow: 0 0 0 20px #FDB813, 0 0 0 25px #FFD948;
}

.cloudy .cloud {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 90px;
  height: 60px;
  border-radius: 50%;
  border: 20px solid white;
  box-shadow: 0 0 0 20px white inset;
}

.rainy .cloud {
  position: absolute;
  top: 35px;
  left: 45px;
  width: 90px;
  height: 60px;
  border-radius: 50%;
  border: 20px solid white;
  box-shadow: 0 0 0 20px white inset, 10px 20px 10px -10px rgba(0,0,0,.8);
}

.snowy .cloud {
  position: absolute;
  top: 45px;
  left: 45px;
  width: 80px;
  height: 60px;
  border-radius: 50%;
  border: 20px solid white;
  box-shadow: 0 0 0 20px white inset, 10px 20px 10px -10px rgba(0,0,0,.8), 20px 40px 10px -18px rgba(0,0,0,.6), -10px 75px 20px -20px rgba(0,0,0,.6);
}

.stormy .cloud {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 20px solid white;
  box-shadow: 0 0 0 20px white inset, 0 0 10px white inset, -30px 20px 10px -20px black, 30px 20px 10px -20px black;
}

在这个示例中，所有图标都使用了同一类“容器”元素，className属性即代表着天气类型。“background”属性用于设置元素的背景颜色，而“box-shadow”和“border”属性则分别用于制造元素外阴影和边框的效果，从而使元素更加立体感强，更符合真实天气图片的视觉感受。注意，所有元素的宽高大小、位置以及渐变的颜色、大小等都有所不同，是为了体现出每一种天气类型的特点，突出元素的形状和素材的特点。