单个div+css布局实现书架效果代码-html代码-BFW代码库

单个div+css布局实现书架效果代码

代码语言：html

代码描述：单个div+css布局实现书架效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #8b4513;
}
#collect {
  width: 100%;
  height: 400px;
  background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0) 40%) 0 50%/100% 205px, linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0) 15%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.2) 85%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.28) 95%) 0 50%/18px 205px, linear-gradient(to right, rgba(255,255,255,0) 49%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0.6) 51%, rgba(255,255,255,0) 51%) 0 34.5% /54px 4px, linear-gradient(to right, rgba(255,255,255,0) 47%, rgba(255,255,255,0.6) 47%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0) 49%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.6) 51%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0) 52%) 18px 34.5% /54px 4px, linear-gradient(to right, rgba(255,255,255,0) 47%, rgba(255,255,255,0.6) 47%, rgba(255,255,255,0.6) 49%, rgba(255,255,255,0) 49%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.6) 51%, rgba(255,255,255,0.6) 53%, rgba(255,255,255,0) 52%) 36px 34.5% /54px 4px, radial-gradient(circle at 50% 20%, black 2.5%, rgba(0,0,0,0) 2.7%) 0 50%/18px 205px, radial-gradient(circle at 33% 95.2%, rgba(0,0,0,0.5) 0.5%, rgba(0,0,0,0) 0.55%) 0 50%/18px 205px, radial-gradient(circle at 43% 93.8%, rgba(0,0,0,0.5) 0.5%, rgba(0,0,0,0) 0.55%) 0 50%/18px 205px, radial-gradient(circle at 57% 92.6%, rgba(0,0,0,0.5) 0.5%, rgba(0,0,0,0) 0.55%) 0 50%/18px 205px, radial-gradient(circle at 57% 94.8%, rgba(0,0,0,0.5) 0.5%, rgba(0,0,0,0) 0.55%) 0 50%/18px 205px, radial-gradient(circle at 70% 93.8%, rgba(0,0,0,0.5) 0.5%, rgba(0,0,0,0) 0.55%) 0 50%/18px 205px, linear-gradient(to bottom, white 20%, rgba(255,255,255,0) 20%) 0 50%/18px 205px, linear-gradient(to right, rgba(255,255,255,0.4) 2%, rgba(255,255,255,0) 2%) 7px 154px /90px 85.41666666666667px, linear-gradient(to right, rgba(255,255,255,0.4) 2%, rgba(255,255,255,0) 2%) 25px 154px /90px 58.57142857142857px, linear-gradient(to right, rgba(255,255,255,0.4) 2%, rgba(255,255,255,0) 2%) 43px 154px /90px 55.4054054054054px, linear-gradient(to right, rgba(255,255,255,0.4) 2%, rgba(255,255,255,0) 2%) 61px 154px /90px 64.0625px, linear-gradient(to right, rgba(255,255,255,0.4) 2%, rgba(255,255,255,0) 2%) 79px 154px /90px 42.708333333333336px, linear-gradient(to right, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0) 10%) 7px 255px/18px 22.77777777777778px, linear-gradient(to right, #808080 18px, transparent 18px) 0 50% /720px 205px, linear-gradient(to right, #a0522d 18px, transparent 18px) 18px 50% /720px 205px, linear-gradient(to right, #cd853f 18px, transparent 18px) 36px 50% /720px 205px, linear-gradient(to right, #fa8072 18px, transparent 18px) 54px 50% /720px 205px, linear-gradient(to right, #f0f 18px, transparent 18px) 72px 50% /720px 205px, linear-gradient(to right, #dda0dd 18px, transparent 18px) 90px 50% /720px 205px, linear-gradient(to right, #f0f 18px, transparent 18px) 108px 50% /720px 205px, linear-gradient(to right, #ee82ee 18px, transparent 18px) 126px 50% /720px 205px, lin.........完整代码请登录后点击上方下载按钮下载查看