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;
  .........完整代码请登录后点击上方下载按钮下载查看