纯css实现鱼鳞片背景效果代码

代码语言:html

所属分类:背景

代码描述:纯css实现鱼鳞片背景效果代码,纯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