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,.........完整代码请登录后点击上方下载按钮下载查看