单个div+css实现针织纹理背景效果代码-html代码-BFW代码库

单个div+css实现针织纹理背景效果代码

代码语言：html

所属分类：背景

代码描述：单个div+css实现针织纹理背景效果代码

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

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

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

  
  
<style>
div {
  position: relative;
}
div::before,
div::after {
  display: block;
  content: '';
  position: absolute;
}
#handmade {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to right, black 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to left, black 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to right, rgba(0,0,0,0) 48%, black 48% 52%, rgba(0,0,0,0) 52%) 0 0/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 90%, black 90.5%) -1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 90%, black 90.5%) 1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 29%, black 29.5% 30.5%, rgba(0,0,0,0) 31%) -0.02em -0.308em/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 29%, black 29.5% 30.5%, rgba(0,0,0,0) 31%) 0.02em -0.308em/2em 1.5em, linear-gradient(50deg, black 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(-50deg, black 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(130deg, black 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(-130deg, black 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(130deg, rgba(0,0,0,0) 95%, black 95.5%) -1em -0.7em/2em 1.5em, linear-gradient(-130deg, rgba(0,0,0,0) 95%, black 95.5%) 1em -0.7em/2em 1.5em, repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 4%, rgba(0,0,0,0.2) 4% 6.5%, rgba(0,0,0,0) 6.5%) 0.42em 0 /3em 1.5em, linear-gradient(50deg, rgba(244,164,96,0) 86%, #f4a460 86%) -1em 20.19em/2em 22.5em, linear-gradient(-50deg, rgba(244,164,96,0) 86%, #f4a460 86%) 1em 20.19em/2em 22.5.........完整代码请登录后点击上方下载按钮下载查看