html云雾效果代码

HTML云雾效果是一种基于CSS样式的特效，可以营造出浓重的云雾氛围，给网页增加一份神秘感。下面是一段HTML云雾效果代码的示例：

div class="fog">
      div class="layer layer-1">
    /div>
      div class="layer layer-2">
    /div>
      div class="layer layer-3">
    /div>
      div class="layer layer-4">
    /div>
      div class="layer layer-5">
    /div>
    /div>
    style>
.fog {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
}
.layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      animation: fog 30s linear infinite;
}
.layer-1 {
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      z-index: 1;
      animation-delay: 0s;
}
.layer-2 {
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      z-index: 2;
      animation-delay: 5s;
}
.layer-3 {
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      z-index: 3;
      animation-delay: 10s;
}
.layer-4 {
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      z-index: 4;
      animation-delay: 15s;
}
.layer-5 {
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      z-index: 5;
      animation-delay: 20s;
}
@keyframes fog {
  0% {
        opacity: 0;
        transform: scale(1.5);
  }
  5% {
        opacity: 1;
        transform: scale(1);
  }
  90% {
        opacity: 1;
        transform: scale(1);
  }
  100% {
        opacity: 0;
        transform: scale(1.5);
  }
}
    /style>
    

在上面的代码中，我们先定义了一个class为.fog的div，设置其宽高为100%、绝对定位于页面的左上角，并隐藏溢出的内容。之后，又定义了五个class分别为.layer-1~layer-5的子元素，也是div，宽高与.fog一样，并采用不同的背景径向渐变。这五个子元素的z-index值也有所区别，目的是形成云雾层次感。然后，我们定义了一个名为fog的动画，用于控制子元素的渐变和出现/消失的时间间隔，总时间为30秒，线性无限循环播放。

最后，我们使用style标签将动画和样式应用到页面上。使用这个代码，你可以轻松为自己的网页添加云雾特效，让你的网页更加独特生动。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！