纯css实现鱼鳞片背景效果代码
代码语言:html
所属分类:背景
代码描述:纯css实现鱼鳞片背景效果代码,纯css代码布局实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
--u: 1.5vmin;
--c1: #ebfdff;
--c2: #4344af;
--c3: #434eaf;
--c4: #3a64b750;
--c5: #3a4db740;
--c6: #3a4db740;
--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);
height: 100vh;
background:
repeating-linear-gradient(90deg, #00bcd430 , #3bffb638 calc(var(--u) * 5), #00bcd430 calc(var(--u) * 10)),
radial-gradient(var(--c50) -36%, var(--p1)) var(--gp),
/*** top right ***/
radial-gradient(var(--c100) -34%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -30%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -26%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -22%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -18%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -14%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -10%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -6%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) -2%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 2%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 6%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 8%, var(--draw-white)) var(--gp),
radial-gradient(var(--c100) 10%, var(--draw-right)) var(--gp),
radial-gradient(var(--c100) 12%, var(--draw-white)) var(--gp),
radial-gradient(var(--c100) 14%, var(--draw-right)) var(--gp),
/*** top left ***/
radial-gradient(var(--c0) -34%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -30%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -26%, var(--draw-left)) var(--gp),
radial-gradient(var(--c0) -22%, var(--draw-left)) var(--gp).........完整代码请登录后点击上方下载按钮下载查看
网友评论0