【实用】通过css纯代码让你的页面背景炫酷起来

前言

简单整理了一些css绘制背景图的样式代码,当然网上也有很多这种代码,写这篇文章的主要目的就是聚合一下，然后使用scss的变量定义了颜色，这样可以方便jym轻松改造！

这里简单整理了21个css样式绘制背景的代码,写了一个查看切换的Demo,方便jym直接切换查看效果，也可以通过className名直接在线复制代码。

在线Demo预览

背景样式-交叉线

// 背景样式1 
.easy-bg-style1{
  $lineColor:#022856;
  $nodeColor:#036389; 
  $bgColor:#041b41;
  background: radial-gradient($nodeColor 2px, transparent 3px),
    radial-gradient($nodeColor 3px, transparent 3px),
    linear-gradient($bgColor 3px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, $lineColor 75px, $lineColor 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, $lineColor 76px, $lineColor 77px, transparent 78px, transparent 109px),
    $bgColor;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

背景样式-栅格线

.easy-bg-style7{ 
  $bgColor:#041b41;
  $lineColor:#0b224a;  
  $gridLineColor:#0d2755;  
  background-color: $bgColor;
  background-image: linear-gradient($gridLineColor 2px, transparent 2px),
  linear-gradient(90deg, $gridLineColor 2px, transparent 2px),
  linear-gradient(rgba($lineColor,1) 1px, transparent 1px),
  linear-gradient(90deg, rgba($lineColor,1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

背景样式-蜂巢格

.easy-bg-style11{
  $bgSColor:#041b41;
  $bgQColor:#0b224a; 
  background: radial-gradient(circle farthest-side at 0% 50%,$bgQColor 23.5%,rgba(240,166,17,0) 0)21px 30px,
    radial-gradient(circle farthest-side at 0% 50%,$bgSColor 24%,rgba(240,166,17,0) 0)19px 30px,
    linear-gradient($bgQColor 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,$bgQColor 0)0 0,
    linear-gradient(150deg,$bgQColor 24%,$bgSColor 0,$bgSColor 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,$bgSColor 0,$bgSColor 76%,$bgQColor 0)0 0,
    linear-gradient(30deg,$bgQColor 24%,$bgSColor 0,$bgSColor 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,$bgSColor 0,$bgSColor 76%,$bgQColor 0)0 0,
    linear-gradient(90deg,$bgSColor 2%,$bgQColor 0,$bgQColor 98%,$bgSColor 0%)0 0 $bgQColor;
  background-size: 40px 60px;
}

背景样式-棋盘格

.easy-bg-style12{
  $bgColor:#041b41;
  $lineColor:#0d2755; 
  background-color: $bgColor; 
  background-image: linear-gradient($lineColor 1px, transparent 1px), 
  linear-gradient(to right, $lineColor 1px, $bgColor 1px);
  background-size: 20px 20px;
}

背景样式-金属质感圆盘

注意：需要把代码改为灰色银白色即可做到圆盘金属质感效果

.easy-bg-style21{
  $bg1Color:#041b41;
  $bg2Color:#0d2755;   
  background: repeating-conic-gradient($bg2Color, $bg1Color, $bg2Color 30deg);
}