css布局实现落日余辉倒影湖面涟漪效果代码-html代码-BFW代码库

css布局实现落日余辉倒影湖面涟漪效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现落日余辉倒影湖面涟漪效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0px;
          padding: 0px;
        }
        body {
          height: 100vh;
          width: 100vw;
          background: black;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .sun {
          background: linear-gradient(174deg, rgba(255,0,0,1) 44%, rgba(255,123,0,1) 63%);
          height: 50vmin;
          width: 50vmin;
          margin-left: 25vmin;
          border-radius: 50%;
          box-shadow: 
            0 -0.5vmin 4vmin red;
          display: flex;
          align-items: center;
          justify-content: center;
        } 
        
        .water {
          position: relative;
          background: black;
          width: 80vmin;
          height: 25vmin;
          top: 26vmin;
          display: flex;
          align-items: center;
          justify-content: center;
          }
        
        .reflection {
          position: relative;
          background: rgba(255,123,0,1);
          color: rgba(255,123,0,1);
          width: 50vmin;
          height: 3vmin;
          border-radius: 50%;
          top: -12vmin;
          box-shadow: 
            0.5vmin 0 2vmin,
            -0.5vmin 0 2vmin;
          animation: fade 3s ease-in-out infinite;
        }
        
        .reflection::after {
          content: '';
          position: absolute;
          background: rgba(255,123,0,1);
          color: rgba(255,123,0,1);
          width: 50vmin;
          height: 5vmin;
          border-radius: 50% 90% 50% 80%;
          top: 2.5vmin;
          box-shadow: 
            0.5vmin 0 2vmin,
            -0.5vmin 0 2vmin;
        }
        
        .reflection::before {
          content: '';
          p.........完整代码请登录后点击上方下载按钮下载查看