div+css布局实现手写笔记本日记本效果代码-html代码-BFW代码库

div+css布局实现手写笔记本日记本效果代码

代码语言：html

代码描述：div+css布局实现手写笔记本日记本效果代码

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

body {
  background: #c96;
  overflow: clip;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  background:
    /* fake texture */
    radial-gradient(70% 1% at 30% 5%, #c632 80%, #0000 0) 50% 50% / 100% 10%,
    radial-gradient(60% 1.3% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 70% 7.5%,
    radial-gradient(50% 0.7% at 30% 5%, #c631 80%, #0000 0) 30% 50% / 50% 17.5%,
    radial-gradient(60% 1% at 30% 5%, #c631 80%, #0000 0) 0% 10% / 60% 9%,
    radial-gradient(80% 1.3% at 30% 5%, #a411 80%, #0000 0) 70% 20% / 66% 7.5%,
    radial-gradient(100% 1.1% at 30% 5%, #c631 80%, #0000 0) 0% 17% / 70% 12.5%,
    radial-gradient(60% 3% at 50% 0, #c631 80%, #0000 0) 0% 10% / 70% 7.5% repeat-y,
    radial-gradient(40% 4% at 70% 5%, #b521 80%, #0000 0) 100% 2% / 70% 5%,
    /* wood stains */
    radial-gradient(80% 50% at 20% 20%, #c0824334 10%, #0000 25%),
    radial-gradient(140% 50% at 90% 45%, #c0824324 10%, #0000 15%),
    radial-gradient(100% 50% at 70% 50%, #c0824324 10%, #0000 15%),
    /* base */
    linear-gradient(to top right, #0001, #ffc5),
    #f0a274;
}

article {
  font-family: 'Indie Flower', 'Patrick Hand SC', 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, Arial, sans-serif;
  font-size: 5vmin;
  background: white;
  padding: 2em 2em 2em 3em;
  width: 85vmin;
  height: 110vmin;
  background: 
    /* radial-gradient(circle at 1em 50%, #000 0.3em, #0000 0.31em) 0 0 / 100% 33.3% repeat-y, */
    radial-gradient(circle at 0.4em 50%, #000 0.125em, #0000 0.135em) 0 0 / 100% 3vmin repeat-y,
    linear-gradient(90deg, #0000 2.35em, #fbb 0 2.4em, #0000 0),
    repeating-linear-gradient(#0000 0 5%, #99f 0 5.1%) 100% 50% / calc(100% - 2.35em) 82% no-repeat,
    #eee;
  border-radius: 0.05em;
  box-shadow: 
    0.1em 0.1em #ddd,
    0.065em 0.05em #fff,
    0.15em 0.15em #bbb,
    0.125em 0 0 0.15em #333,
    0.25em 0.125em 0 0.15em #000;
  transform: rotate(3deg) translate(5%, 5%);
  transform-origin: 10% 10%;
  position: relative;
  filter: drop-shadow(-0.25vmin 0.1em 0.35vmin #0002) drop-shadow(1vmin 0 1vmin #0003);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1em;
    width: 1.5em;
    height: 100%;
    background: 
      linear-gradient(#0000 0.225em, #999 0 0.375em, #0000 0) 80% 0 / 68% 3vmin repeat-y,
      linear-gradient(25deg, #0000 0.225em, #666 0 0.35em, #0000 0) 44% 0.1% / 40% 3vmin repeat-y,
      radial-gradient(circle.........完整代码请登录后点击上方下载按钮下载查看