css无div实现梭织面料镶嵌图案背景效果代码

代码语言:html

所属分类:背景

代码描述:css无div实现梭织面料镶嵌图案背景效果代码

代码标签: css 梭织 面料 镶嵌 图案 背景

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


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

<head>

  <meta charset="UTF-8">
  

<style>
html {
    --u:  3vmin; /*** size ***/
    --c1: #b1cddb;
    --c2: #96b5cb;
    --c3: #7d9eaf;
    --c4: #6f92a3;
    --sh: #0006;
    --sh2: #0002;
    --gp: 50%/ calc(var(--u) * 2) calc(var(--u) * 2);
    height: 100vh;
	background: 
		repeating-linear-gradient(45deg, #42312f30 calc(var(--u) * 0.125), #fff0 calc(var(--u) * 0.25) ), 
		conic-gradient(from 85deg at 75% 1px, #fff0 0, var(--sh2) 0%, #fff0 5% 100%) var(--gp),  
		conic-gradient(from -5deg at 0% calc(75% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--gp),  
		conic-gradient(from 0deg at 75% calc(75% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--gp),  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0