CSS书本

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  display: flex;
    background: #c3e4de;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 96vh;

}
.frame {
  z-index: -1;
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  justify-contents: center;
}
.book-cover-container {
  box-shadow: 0 0 55px #888;
  display: grid;
  background: pink;
  position: absolute;
  grid-template-columns: 12px 10px 198px;
  width: 220px;
  height: 300px;
  justify-content: center;
  left: 22%;
  top: 12%;
 border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
   border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.binding {
  position: absolute;
  width: 12px;
  grid-column: 1 / span 1;
  height: 300px;
  background-image: linear-gradient(
    to right,
    #0e0e0e,
    #131313,
    #171617,
    #1b1a1a,
    #1f1d1d,
    #232121,
    #272525,
    #2b2929,
    #312f2f,
    #363536,
    #3c3c3c,
    #424242
  );
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.binding-shadow {
  position: absolute;
  width: 10px;
  grid-column: 2 / span 1;
  height: 300px;
  background-image: linear-gradient(
    to bottom,
    #1f1e1e,
    #1d1c1c,
    #1b1a1a,
    #1a1919,
    #181717
  );
}
.cover {
  position: absolute;
  width: 198px;
  grid-column: 3 / span 1;
  height: 300px;
  border-top-right-radius: 16px;
  
  border-bottom-right-radius: 16px;
  background-image: linear-gradient(
    to right top,
    #0e0e0e,
    #131213,
    #171617,
    #1b191a,
    #1f1c1d,
    #232021,
    #272425,
    #2b2829,
    #302e2f,
    #363536,
    #3c3b3c,
    #424242
  );
}
.ribbon {
  height: 304px;
  width: 10px;
  border-radius: 2px;
  z-index: 3;
  background: #a20329;
  top: -0.4%;
  left: 80%;
  position: absolute;
  display: grid;
  grid-template-columns: repeat(7, auto);
}

.heading-cont {
  display: grid;
  grid-template-rows: 40px 30px;
  gap: 8px;
  width: 150px;
  top: 15%;
  height: 70px;
  text-align: left;
  position: absolute;
}
.heading {
  position: absolute;
  grid-row: 1 / span 1;
  font-size: 32px;
  padding: 0 20px;
  color: white;
  font-weight: bold;
}
.sub-heading {
  padding: 95px 20px;
  color: white;
  position: absolute;
  grid-row: 2 / span 1;
  font-style: italic;
  font-size: 11.5px;
}

JavaScript

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