css布局实现可爱蓝天白云太阳动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css布局实现可爱蓝天白云太阳动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: #ade5f5;
  color: #333;
  font: 100% Arial, Sans Serif;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.cloud-content {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

.cloud-block {
  position: absolute;
  opacity: 0.8;
}
.cloud-1 {
  top: 50px;
}
.cloud-2 {
  top: 40vh;
}
.cloud-3 {
  top: 20vh;
}
.cloud-4 {
  top: 40vh;
}
.cloud-5 {
  top: 65vh;
}
.cloud-6 {
  top: 35vh;
}
.cloud-7 {
  bottom: 30px;
}

.cloud-1 {
  animation: animate-1 32s linear infinite;
  -webkit-animation: animate-1 32s linear infinite;
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
}

.cloud-2 {
  animation: animate-2 37s linear infinite;
  -webkit-animation: animate-2 37s linear infinite;
  transform: scale(0.45);
  -webkit-transform: scale(0.45);
}

.cloud-3 {
  animation: animate-3 45s linear infinite;
  -webkit-animation: animate-3 45s linear infinite;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

.cloud-4 {
  animation: animate-4 50s linear infinite;
  -webkit-animation: animate-4 50s linear infinite;
  transform: scale(0.4);
  -webkit-transform: scale(0.4);
}

.cloud-5 {
  animation: animate-5 55s linear infinite;
  -webkit-animation: animate-5 55s linear infinite;
  transform: scale(0.55);
  -webkit-transform: scale(0.55);
}

.cloud-6 {
  animation: animate-6 60s linear infinite;
  -webkit-animation: animate-6 60s linear infinite;
  transform: scale(0.45);
  -webkit-transform: scale(0.45);
}

.cloud-7 {
  animation: animate-7 65s linear infinite;
  -webkit-animation: animate-7 65s linear infinite;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

/* Cloud Objects */

.cloud {
  width: 350px;
  height: 120px;
  border-radius: 100px;
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 16px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  background: #fff;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  width: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  border-radius: 100px;
}

.cloud:before {
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
  border-radius: 200px;
}

/* KEYFRAMES */

@keyframes animate-1 {
  0% {
    left: 90%;
  }
  10% {
    left: 110%;
  }
  10.001% {
    left: -10%;
  }
  100% {
    left: 90%;
  }
}

@keyframes animate-2 {
  0% {
    left: 75%;
  }
  25% {
    left: 110%;
  }
  25.001% {
    left: -10%;
  }
  100% {
    left: 75%;
  }
}

@keyframes animate-3 {
  0% {
    left: 60%;
  }
  40% {
    left: 110%;
  }
  40.001% {
    left: -10%;
  }
  100% {
    left: 60%;
  }
}

@keyframes animate-4 {
  0% {
    left: 45%;
  }
  55% {
    left: 110%;
  }
  55.001% {
    left: -10%;
  }
  100% {
    left: 45%;
  }
}

@keyframes animate-5 {
  0% {
    left: 30%;
  }
  70% {
    left: 110%;
  }
  70.001% {
    left: -10%;
  }
  100% {
    left: 30%;
  }
}

@keyframes animate-6 {
  0% {
    left: 10%;
  }
  90% {
    left: 110%;
  }
  90.001% {
    left: -10%;
  }
  100% {
    left: 10%;
  }
}

@keyframes animate-7 {
  0% {
    left: -10%;
  }

  99.99% {
    left: 110%;
  }
  100% {
    left: -10%;
  }
}

/* ANIMATIONS */

.sun {
  margin: 0px auto;
  width: 170px;
  height: 170px;
  border-radius: 100%;
  background-color: #fcc952;
  background-image: linear-gradient(
    145deg,
    rgba(252, 201, 82, 1) 0%,
    rgba(252, 201, 82, 1) 61%,
    rgba(248, 160, 55, 1) 100%
  );
  -webkit-background-image: linear-gradient(
    145deg,
    rgba(252, 201, 82, 1) 0%,
    rgba(252, 201, 82, 1) 61%,
    rgba(248, 160, 55, 1) 100%
  );
  box-shadow: inset 2px 2px 8px 0 rgba(252, 201, 82, 0),
    inset -3px -3px 8px 0 rgba(245, 169, 76, 0),
    6px 6px 18px 0 rgba(204, 123, 35, 0.35),
    -6px -6px 18px 0 rgba(205, 157, 35, 0.5);
  -webkit-box-shadow: inset 2px 2px 8px 0 rgba(252, 201, 82, 0),
    inset -3px -3px 8px 0 rgba(245, 169, 76, 0),
    6px 6px 18px 0 rgba(204, 123, 35, 0.35),
    -6px -6px 18px 0 rgba(205, 157, 35, 0.5);
  position: relative;
  z-index: 2;
}
.sunlight-content {
  bottom: 0;
  left: 50%;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
}
.sun-face {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: tran.........完整代码请登录后点击上方下载按钮下载查看