单个div+css实现20款不同背景效果代码-html代码-BFW代码库

单个div+css实现20款不同背景效果代码

代码语言：html

所属分类：背景

代码描述：单个div+css实现20款不同背景效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(auto-fit, min(100%, 13em));
  place-content: center;
  background: #333;
}

.card {
  overflow: hidden;
  position: relative;
  padding: min(85%, 9.75em) 0;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to left top, #ec014b, #06cced);
  isolation: isolate;
}
.card::before, .card::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  content: "";
}
.card::before {
  background: repeating-linear-gradient(45deg, #000, #999, #000 5%), linear-gradient(45deg, #777, #000);
  background-blend-mode: screen;
  filter: contrast(19);
  mix-blend-mode: multiply;
}
.card::after {
  background: linear-gradient(90deg, #251967, #d0135e);
  mix-blend-mode: screen;
}

.card:nth-child(2)::before {
  background: repeating-radial-gradient(circle at 0 50%, #000, #999, #000 5%), radial-gradient(circle at 0 50%, #777, #000);
}

.card:nth-child(3)::before {
  background: repeating-conic-gradient(at -9% 25%, #000, #999, #000 2.5%), conic-gradient(at -9% 25%, #000, #777 50%);
}

.card:nth-child(4)::before {
  background: repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%), linear-gradient(30deg, #777, #000);
}

.card:nth-child(5)::before {
  background: linear-gradient(#777, #000), repeating-radial-gradient(circle at -35% 0, #000, #999, #000 5%), repeating-radial-gradient(circle at -35% 100%, #000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(6)::before {
  background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-linear-gradient(-60deg, #000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(7)::before {
  background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-conic-gradient(#000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(8)::before {
  background: linear-gradient(30deg, #777, #000), repeating-linear-gradient(30deg, #000, #999, #000 5%), repeating-radial-gradient(circle at 100% 50%, #000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(9)::before {
  background: radial-gradient(circle, #777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(10)::before {
  background: conic-gradient(#777, #000), repeating-linear-gradient(-45deg, #000, #999, #000 5%), repeating-linear-gradient(45deg, #000, #999, #000 5%);
  background-blend-mode: screen, difference;
}

.card:nth-child(11)::before {
  background: radial-gradient(circle, #000, #666 70%), radial-gradient(circle, #000, #fff, #000 71%) 0 0/2em 2em round, radial-gradient(circle, #000, #fff, #000 71%) 1em 1em/2em 2em round;
  background-blend-mode: difference;
}

.card:nth-child(12)::before {
  background: linear-gradient(-15deg, #000, #666), radial-gradient(cir.........完整代码请登录后点击上方下载按钮下载查看