css布局绘制天鹅日出湖面效果代码-html代码-BFW代码库

css布局绘制天鹅日出湖面效果代码

代码语言：html

代码描述：css布局绘制天鹅日出湖面效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
* {
  margin: 0;
  font-size: clamp(10px, 1.5vw, 100px);
}

body {
  background: #5accd8;
}

.sky {
  width: 50em;
  min-width: 100%;
  height: 10em;
   background: linear-gradient(
    #5e9696 0% 30%,
    #c5b493 55% 60%,
    #ffad6a 90% 100%
  );
  position: absolute;
  left: 0;
  top: 0;
}

.sun {
  width: 20em;
  height: 20em;
  background: linear-gradient(
    #fefefc 0% 10%,
    #fdf3ce 25% 30%,
    #fbe38d 45% 100%
  );
  border-radius: 50%;
  position: absolute;
  left: max(50%, 25em);
  top: 8em;
  transform: translate(-50%, -40%);
  filter: blur(1px);
  box-shadow: 
    0px 10px 20px 1px #ffffffab inset,
    0px 0px 20px 2px #fff4cec4;
}

.lake {
  width: 50em;
  min-width: 100%;
  height: 40em;
  min-height: calc(100vh - 10em);
  background: 
    radial-gradient(
      ellipse at 50% -20%, 
      #f4eccc 0% 24%,
      transparent 45% 100% 
    ),
    linear-gradient(
      #f0c59d 0% 1%,
      #00b9cc 10% 100%
    );
  position: absolute;
  left: 0;
  top: 10em;
}

.fluctuating-water {
  height: 16em;
  width: 50em;
  position: absolute;
  top: 15em;
  left: 50%;
  transform: translate(-50%, 0%);
  background: radial-gradient(
    transparent 0% 25%,
    #0ac5d970 29% 30%,
    transparent 30% 35%,
    #0ac5d970 39% 40%,
    transparent 40% 45%,
    #0ac5d970 49% 50%,
    transparent 51% 100%) 50% 100% / 70em 12em no-repeat;
  filter: blur(2px);
}

.swan {
  height: 16em;
  width: 20em;
  position: absolute;
  top: 10em;
  left: 50%;
  transform: translate(-50%, 0%);
}

.p1 {
  width: 11.5em;
  height: 11.5em;
  border-radius: 95% 5% 70% 30% / 95% 30% 70% 5%;
  background: #fff;
  position: absolute;
  top: 59.7%;
  left: 50.3%;
  transform: translate(-50%, -50%) rotate(50deg);
}

.p2 {
  width: 3em;
  height: 2.5em;
  border-radius: 50%;
  border-right: 1.7em solid #fff;
  border-top: 2em solid transparent;
  border-bottom: 2em solid transparent;
  position: absolute;
  top: 43.5%;
  left: 72.0%;
  transform: translate(-50%, -50%) rotate(-16deg);
}

.p3 {
  width: 3em;
  height: 3.4em;
  border-radius: 50%;
  border-right: 1.5em solid #fff;
  border-top: 2.8em solid transparent;
  border-bottom: 2.0em solid transparent;
  position: absolute;
  top: 48.3%;
  left: 75.8%;
  transform: translate(-50%, -50%) rotate(-25deg);
}

.p4 {
  width: 3em;
  height: 3.2em;
  border-radius: 50%;
  border-left: 1.7em solid #fff;
  border-top: 1.7em solid transparent;
  border-bottom: 1.7em solid transparent;
  position: absolute;
  top: 24.1%;
  left: 80.3%;
  transform: translate(-50%, -50%) rotate(-23deg);
}

.p5 {
  width: 3em;
  height: 2.95em;
  border-radius: 50%;
  border-left: 1.5em solid #fff;
  border-top: 1.5em solid transparent;
  border-bottom: 1.7em solid #fff;
  border-right: 1.7em solid transparent;
  position: absolute;
  top: 19.0%;
  left: 82.5%;
  transform: translate(-50%, -50%) rotate(100deg);
}

.p6 {
/*   background: #fff3; */
  width: 3em;
  height: 2em;
  border-radius: 30% 40%;
  border-right: 1.5em solid #fff;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  position: absolute;
  top: 18.4%;
  left: 85.8%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.p7 {
  width: 1.8em;
  he.........完整代码请登录后点击上方下载按钮下载查看