纯css实现雷纹背景效果代码-html代码-BFW代码库

纯css实现雷纹背景效果代码

代码语言：html

所属分类：背景

代码描述：纯css实现雷纹背景效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
  /* カラー */
  --fore-color: #e30b20;
  --back-color: #ffffff;
  
  /* サイズ */
  --s: 4px;
  --s-00: calc(var(--s) * 00);
  --s-01: calc(var(--s) * 01);
  --s-02: calc(var(--s) * 02);
  --s-03: calc(var(--s) * 03);
  --s-04: calc(var(--s) * 04);
  --s-05: calc(var(--s) * 05);
  --s-06: calc(var(--s) * 06);
  --s-07: calc(var(--s) * 07);
  --s-08: calc(var(--s) * 08);
  --s-09: calc(var(--s) * 09);
  --s-10: calc(var(--s) * 10);
  --s-11: calc(var(--s) * 11);
  --s-12: calc(var(--s) * 12);
  --s-13: calc(var(--s) * 13);
  --s-14: calc(var(--s) * 14);
  --s-15: calc(var(--s) * 15);
  --s-16: calc(var(--s) * 16);
  --s-17: calc(var(--s) * 17);
  --s-18: calc(var(--s) * 18);
  --s-19: calc(var(--s) * 19);
  --s-20: calc(var(--s) * 20);
  --s-21: calc(var(--s) * 21);
  --s-22: calc(var(--s) * 22);
  --s-23: calc(var(--s) * 23);
  --s-24: calc(var(--s) * 24);
  --s-25: calc(var(--s) * 25);
  --s-26: calc(var(--s) * 26);
  --s-27: calc(var(--s) * 27);
  --s-28: calc(var(--s) * 28);
  
  /* レイヤー */
  --layer-base: 
    linear-gradient(var(--back-color) 0 0);
  --layer-01: 
    var(--s-06) var(--s-06) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-02) var(--s-01), var(--back-color) 90deg, #fff0 90deg),
    var(--s-05) var(--s-05) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-04) var(--s-02), var(--fore-color) 90deg, #fff0 90deg),
    var(--s-04) var(--s-04) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-06) var(--s-03), var(--back-color) 90deg, #fff0 90deg),
    var(--s-03) var(--s-03) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-08) var(--s-04), var(--fore-color) 90deg, #fff0 90deg),
    var(--s-02) var(--s-02) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-10) var(--s-05), var(--back-color) 90deg, #fff0 90deg),
    var(--s-01) var(--s-01) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-12) var(--s-06), var(--fore-color) 90deg, #fff0 90deg),
    var(--s-00) var(--s-00) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-14) var(--s-07), var(--back-color) 90deg, #fff0 90deg);
  --layer-02: 
    var(--s-07) var(--s-07) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-02) var(--s-01), var(--fore-color) 90deg, #fff0 90deg),
    var(--s-06) var(--s-07) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-04) var(--s-02), var(--back-color) 90deg, #fff0 90deg),
    var(--s-05) var(--s-07) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-06) var(--s-03), var(--fore-color) 90deg, #fff0 90deg),
    var(--s-04) var(--s-07) / var(--s-28) var(--s-14) conic-gradient(from 270deg at var(--s-08) v.........完整代码请登录后点击上方下载按钮下载查看