css实现金色龙鳞背景效果代码

代码语言:html

所属分类:背景

代码描述:css实现金色龙鳞背景效果代码

代码标签: css 金色 龙鳞 背景

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

<style>* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
button {
  font-family: inherit;
}

.containerbg {
  width: 100%;
  height: 100vh;
  --u: 0.5vmin;
  --c1: #fff1e6;
  --c2: #ff4d00;
  --c3: #ff6200;
  --c4: #ff7b0050;
  --c5: #ff6a0040;
  --c6: #ff6a0040;

  --draw-mid: #fff0 0 calc(var(--u) * 3.25), var(--c4) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-left: #fff0 0 calc(var(--u) * 3.25), var(--c5) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-right: #fff0 0 calc(var(--u) * 3.25), var(--c6) calc(var(--u) * 3.5),
    #fff0 calc(var(--u) * 3.75) 100%;
  --draw-white: var(--c1) calc(var(--u) * 3.58) calc(var(--u) * 3.62),
    #fff0 calc(var(--u) * 3.66) 100%;
  --p1: var(--c1) calc(var(--u) * 3.5), var(--c3) calc(var(--u) * 3.9),
    #fff0 calc(var(--u) * 4) 100%;
  --p2: var(--c1) calc(var(--u) * 3.75), #fff0 calc(var(--u) * 4) 100%;
  --c0: circle at 0%;
  --c50: circle at 50%;
  --c100: circle at 100%;
  --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 10);
  background:
    repeating-linear-gradient(
      90d.........完整代码请登录后点击上方下载按钮下载查看

网友评论0