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

代码语言：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-bottom: 15%;
  box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3);
  transition-property: transform;
  transition-duration: .3s;
}

img:hover{
  transform: translateX(-60%) translateY(-60%) rotatez(-25deg);
}
@media (min-width:600px){
  :root {
    --columns: 5;
  }
  li:nth-child(2n){
    grid-column-start:auto;
  }
  li:nth-child(4n-1){
    grid-column-start:2;
  }
}
@media (min-width:900px){
  :root {
    --columns: 7;
  }
  li:nth-child(4n-1){
    grid-column-start:auto;
  }
  li:nth-child(6n-2){
    grid-column-start:2;
  }
}
@media (min-width:1200px){
  :root {
    --columns: 9;
  }
  li:nth-child(6n-2){
    grid-column-start:auto;
  }
  li:nth-child(8n-3){
    grid-column-start:2;
  }
}
@media (min-width:1500px){
  :root {
    --columns: 11;
  }
  li:nth-child(8n-3){
    grid-column-start:auto;
  }
  li:nth-child(10n-4){
    grid-column-start:2;
  }
}
@media (min-width:1800px){
  :root {
    --columns: 13;
  }
  li:nth-child(10n-4){
    grid-column-start:auto;
  }
  li:nth-child(12n-5){
    grid-column-start:2;
  }

}
@media (min-width:2100px){
  :root {
    --columns: 15;
  }
  li:nth-child(12n-5){
    grid-column-start:auto;
  }
  li:nth-child(14n-6){
    grid-column-start:2;
  }

}
</style>

</head>
<body translate="no">
<ul>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced8a36cc5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced984b1ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced984b1ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9cedbfbccd0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
<li><img src="http://repo.bfw.wiki/bfwrepo/image/5e9ced76b41d1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_137,h_210,/quality,q_90" /></li>
</ul>

<script >
/**
 * CSS conic-gradient() polyfill
 * By Lea Verou — http://lea.verou.me
 * MIT license
 */

(function () {

  var π = Math.PI;
  var τ = 2 * π;
  var ε = .00001;
  var deg = π / 180;

  var dummy = document.createElement("div");
  document.body.appendChild(dummy);

  var _ = self.ConicGradient = function (o) {
    var me = this;
    _.all.push(this);

    o = o || {};

    this.canvas = document.createElement("canvas");
    this.context = this.canvas.getContext("2d");

    this.repeating = !!o.repeating;

    this.size = o.size || Math.max(innerWidth, innerHeight);

    this.canvas.width = this.canvas.height = this.size;

    var stops = o.stops;

    this.stops = (stops || "").split(/\s*,(?![^(]*\))\s*/); // commas that are not followed by a ) without a ( first

    this.from = o.from || 0;

    for (var i = 0; i < this.stops.length; i++) {if (window.CP.shouldStopExecution(0)) break;
      if (this.stops[i]) {
        var stop = this.stops[i] = new _.ColorStop(this, this.stops[i]);

        if (stop.next) {
          this.stops.splice(i + 1, 0, stop.next);
          i++;
        }
      } else
      {
        this.stops.splice(i, 1);
        i--;
      }
    }window.CP.exitedLoop(0);

    if (this.stops[0].color.indexOf('from') == 0) {
      this.from = this.stops[0].pos * 360;
      this.stops.shift();
    }
    // Normalize stops

    // Add dummy first stop or set first stop’s position to 0 if it doesn’t have one
    if (this.stops[0].pos === undefined) {
      this.stops[0].pos = 0;
    } else
    if (this.stops[0].pos > 0) {
      var first = this.stops[0].clone();
      first.pos = 0;
      this.stops.unshift(first);
    }

    // Add dummy last stop or set last stop’s position to 100% if it doesn’t have one
    if (this.stops[this.stops.length - 1].pos === undefined) {
      this.stops[this.stops.length - 1].pos = 1;
    } else
    if (!this.repeating && this.stops[this.stops.length - 1].pos < 1) {
      var last = this.stops[this.stops.length - 1].clone();
      last.pos = 1;
      this.stops.push(last);
    }

    this.stops.forEach(function (stop, i) {
      if (stop.pos === undefined) {
        // Evenly space color stops with no position
        for (var j = i + 1; this[j]; j++) {if (window.CP.shouldStopExecution(1)) break;
          if (this[j].pos !== undefined) {
            stop.pos = this[i - 1].pos + (this[j].pos - this[i - 1].pos) / (j - i + 1);
            break;
          }
        }window.CP.exitedLoop(1);
      } else
      if (i > 0) {
        // Normalize color stops whose position is smaller than the position of the stop before them
        stop.pos = Math.max(stop.pos, this[i - 1].pos);
      }
    .........完整代码请登录后点击上方下载按钮下载查看