css实现山间云朵飘动景色效果代码

代码语言:html

所属分类:布局界面

代码描述:css实现山间云朵飘动景色效果代码

代码标签: css 山间 飘动 景色

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --grey1: #53697A;
          --grey2: #4b5b66;
          --grey3: #788896;
          --sky: #C6CDC7;
          --snow: #f1efea;
          --close1: #c6ccc6;
          --close2: #e6e1d7;
          --green1: #606153;
          --green2: #443f35;
          --green3: #52553d;
          --dark: #2e2c25;
          --green11: #4CAF50;
          --green21: #00796B;
          --green31: #004D40;
          --light: whitesmoke;
        }
        
        *, *:before, *:after {
          box-sizing: border-box;
        }
        
        img {
          max-width: 76%;
          margin: auto;
          display: block;
        }
        
        .clip {
          position: relative;
          width: 70vh;
          height: 60.2vh;
          margin: 15vh auto;
          background: var(--sky);
          -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          overflow: hidden;
        }
        
        .clip *,
        .clip *:before,
        .clip *:after {
          width: 0;
          height: 0;
          border: 0 solid;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top-color: transparent;
          position: absolute;
          bottom: 0;
        }
        
        .mountain-1 {
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0