自适应css书架交互效果-html代码-BFW代码库

自适应css书架交互效果

代码语言：html

代码描述：自适应css书架交互效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --columns: 3;
}

body{
  background-color: #182028;
}

ul{
  display:grid;
  grid-template-columns: repeat(var(--columns),1fr);
  margin: 150px 0 120px 80px;
}

li{
  grid-column-end: span 2;
  width: 71%;
  padding-bottom: 71%;
  transform: rotatez(45deg);
  margin-top: -21%;
}

li::before, li::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
}

li::before {
  z-index: -10;
  clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 100%, 0 100%);
  webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 20% 20%, 20% 100%, 100% 100%);
}
li::after {
  z-index: 10;
  clip-path: polygon(80% 20%, 100% 0, 100% 100%, 0% 100%, 20% 80%, 80% 80%);
  webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 0% 100%, 0 80%, 80% 80%);
}

li:nth-child(2n){
  grid-column-start:2;
}

li{
  background-color: #EEBC1F;
}
li::before{
  background-color: #068D7E;
  background: conic-gradient(#EEBC1F 25%, #068D7E 0 50%, #EEBC1F 0) 100% 100% /180% 180%;
}
li::after{
  background-color: #068D7E;
  background: conic-gradient(#EEBC1F 75%, #068D7E 0) 0 0 /180% 180%;
}

li:nth-child(2n){
  background-color: #FF5291;
}
li:nth-child(2n)::before{
  background-color: #4062BB;
  background: conic-gradient(#FF5291 25%, #4062BB 0 50%, #FF5291 0) 100% 100% /180% 180%;
}
li:nth-child(2n)::after{
  background-color: #4062BB;
  background: conic-gradient(#FF5291 75%, #4062BB 0) 0 0 /180% 180%;
}

li:nth-child(5n){
  background-color: #068D7E;
}
li:nth-child(5n)::before{
  background-color: #FF5291;
  background: conic-gradient(#068D7E 25%, #FF5291 0 50%, #068D7E 0) 100% 100% /180% 180%;
}
li:nth-child(5n)::after{
  background-color: #FF5291;
  background: conic-gradient(#068D7E 75%, #FF5291 0) 0 0 /180% 180%;
}

li:nth-child(7n),li:nth-child(7n-4){
  background-color: #4062BB;
}
li:nth-child(7n)::before,li:nth-child(7n-4)::before{
  background-color: #F8FFE5;
  background: conic-gradient(#4062BB 25%, #F8FFE5 0 50%, #4062BB 0) 100% 100% /180% 180%;
}
li:nth-child(7n)::after,li:nth-child(7n-4)::after{
  background-color: #F8FFE5;
  background: conic-gradient(#4062BB 75%, #F8FFE5 0) 0 0 /180% 180%;
}

li:nth-child(9n),li:nth-child(9n-5){
  background-color: #F8FFE5;
}
li:nth-child(9n)::before,li:nth-child(9n-5)::before{
  background-color: #068D7E;
  background: conic-gradient(#F8FFE5 25%, #068D7E 0 50%, #F8FFE5 0) 100% 100% /180% 180%;
}
li:nth-child(9n)::after,li:nth-child(9n-5)::after{
  background-color: #068D7E;
  background: conic-gradient(#F8FFE5 75%, #068D7E 0) 0 0 /180% 180%;
}

img{
  position: absolute;
  width: 60%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotatez(-45deg);
  padding.........完整代码请登录后点击上方下载按钮下载查看