css布局实现卡片背景偏移视觉差效果代码-html代码-BFW代码库

css布局实现卡片背景偏移视觉差效果代码

代码语言：html

代码描述：css布局实现卡片背景偏移视觉差效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<link href="https://fonts.googleapis.com/css2?family=Handlee&display=swap" rel="stylesheet">
  
  
  
<style>



@keyframes float {
  to {
    transform: translateY(0.75em);
  }
}
*, ::before {
  box-sizing: inherit;
  margin: 0;
  font: inherit;
}

html {
  font: 100 1.25em/1.25 handlee, z003, segoe script, comic sans ms, cursive;
}
@media (max-width: 320px) {
  html {
    font-size: 1em;
  }
}
@media (max-width: 240px) {
  html {
    font-size: 0.75em;
  }
}

body {
  box-sizing: border-box;
  display: grid;
  grid-gap: 1.25em;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  overflow-x: hidden;
  min-height: 100vh;
  padding: 0.5em;
  background: linear-gradient(var(--ang, 185deg), #000 calc(50% - .5px), #fff calc(50% + .5px));
}
@media (min-width: 37.8125em) {
  body {
    --ang: 85deg ;
  }
}

article {
  --s0: calc(1.25em + 6px);
  --s1: calc(1.25em + 6px + 0.5em);
  --img: url("//repo.bfw.wiki/bfwrepo/image/6050221e5fe33.png");
  place-self: center;
  position: relative;
  width: 14em;
  height: 14em;
  border: solid 0 transparent;
  border-width: 0 var(--.........完整代码请登录后点击上方下载按钮下载查看