响应式CSS网格-书籍

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --columns: 3;
  --yellow: rgba(238, 188, 31, 1);
  --pink: rgba(255, 82, 145, 1);
  --blue: rgba(64, 98, 187, 1);
  --green: rgba(6, 141, 126, 1);
  --white: rgba(248, 255, 229, 1);
}

body{
  background-color: #182028;
}

ul{
  display:grid;
  grid-template-columns: repeat(var(--columns),1fr);
  margin: 200px -40px;
}

li{
  grid-column-end: span 2;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin-top: -50%;list-style-type: none;
}

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

li::before, li::after {
  content:'';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 50% 100%,50% 100%;
  background-position: left, right;
}

li::before{
  z-index: -10;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background-repeat: no-repeat;
  background-image: linear-gradient(-45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%), linear-gradient(45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%);
}

li::after{
  clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
  -webkit-clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%);
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg,var(--yellow) 40%,var(--green) 40%), linear-gradient(-45deg,var(--yellow) 40%,var(--green) 40%);
}

li:nth-child(2n)::before{
  background-image: linear-gradient(-45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%), linear-gradient(45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%);
}

li:nth-child(2n)::after{
  background-image: linear-gradient(45deg,var(--pink) 40%,var(--blue) 40%), linear-gradient(-45deg,var(--pink) 40%,var(--blue) 40%);
}

li:nth-child(5n)::before{
  background-image: linear-gradient(-45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%), linear-gradient(45deg,var(--green) 53.5%,var(--pink) 53.5%,var(--pink) 60%,var(--green) 60%);
}

li:nth-child(5n)::after{
  background-image: linear-gradient(45deg,var(--green) 40%,var(--pink) 40%), linear-gradient(-45deg,var(--green) 40%,var(--pink) 40%);
}

li:nth-child(7n)::before,li:nth-child(7n-4)::before{
  background-image: linear-gradient(-45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%), linear-gradient(45deg,var(--blue) 53.5%,var(--white) 53.5%,var(--white) 60%,var(--blue) 60%);
}

li:nth-child(7n)::after,li:nth-child(7n-4)::after{
  background-image: linear-gradient(45deg,var(--blue) 40%,var(--white) 40%), linear-gradient(-45deg,var(--blue) 40%,var(--white) 40%);
}

li:nth-child(9n)::before,li:nth-child(9n-5)::before{
  background-image: linear-gradient(-45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%), linear-gradient(45deg,var(--white) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--white) 60%);
}

li:nth-child(9n)::after,li:nth-child(9n-5)::after{
  background-image: linear-gradient(45deg,var(--white) 40%,var(--green) 40%), linear-gradient(-45deg,var(--white) 40%,var(--green) 40%);
}

img{
  position: absolute;
  width: 43%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-60%);
  box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3);
  transition-property: transform;
  transition-duration: .3s;
}

img:hover{
  transform: translateX(-40%) translateY(-70%) rotatez(25deg);
}
@media (min-width:450px){
  ul{
    margin: 190px 40px;
  }
}
@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;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg