原生js实现折叠堆叠纸张动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现折叠堆叠纸张动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Asul',rel='stylesheet'> <style> html, body { margin: 0; } body { font-family: "Asul"; font-size: 22px; overflow: hidden; width: 100%; height: 100%; display: inline-block; background: #e9dfc4; background: linear-gradient(left, #e9dfc4 0%, #e9dfc4 1%, #ede3c8 2%, #ede3c8 24%, #ebddc3 25%, #e9dfc4 48%, #ebddc3 49%, #e6d8bd 52%, #e6d8bd 53%, #e9dbc0 54%, #e6d8bd 55%, #e6d8bd 56%, #e9dbc0 57%, #e6d8bd 58%, #e6d8bd 73%, #e9dbc0 74%, #e9dbc0 98%, #ebddc3 100%); background-size: 120px; background-repeat: repeat; } img { max-width: 100%; } mark { background-color: #FFFF00; border: 1px dashed #FFFF00; } .instruction { transform: rotate(90deg) translateX(-50%); transform-origin: left top 0; transform-origin: 0 0; position: absolute; left: 2.05em; text-align: center; letter-spacing: 1.5px; word-spacing: 1px; margin: 0; top: 50%; color: rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 0.5); width: 200vw; padding: 1em; line-height: 0; display: inline-block; } button { border: none; background-color: rgba(80, 11, 6, 0.4); color: white; padding: 1.25em 2em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .all { width: 21em; position: relative; top: 2em; margin: 0 auto; max-width: calc(100vw - 6em); } section article { overflow: auto; margin: 0; opacity: 0; transition: 1s opacity ease-in-out; position: relative; } section article > *:not(img) { padding-right: 1.5em; padding-left: 2.5em; } h1 { margin-top: 0; } section { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 0; height: 20em; max-height: calc(100vh - 10em); background-color: white; border: 1px solid black; padding: 3.5em 0 1.5em; overflow: auto; transition: 1s transform ease-in-out, 1s opacity ease-in-out; background-color: #fafafa; } section:before { display: block; font-size: 0.65em; min-width: 1em; text-align: center; position: absolute; top: 2em; right: 1.5em; background-color: rgba(80, 11, 6, 0.4); color: white; padding: 0.3em; } p:first-of-type { margin-top: 0; } section:nth-child(1) { z-index: 10; transform: rotate(-4deg); } section:nth-child(1):before { content: "1"; } section:nth-child(1).leave { transform: rotate(-4deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(2) { z-index: 9; transform: rotate(2deg); } section:nth-child(2):before { content: "2"; } section:nth-child(2).leave { transform: rotate(2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(3) { z-index: 8; transform: rotate(-3deg); } section:nth-child(3):before { content: "3"; } section:nth-child(3).leave { transform: rotate(-3deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(4) { z-index: 7; transform: rotate(-2deg); } section:nth-child(4):before { content: "4"; } section:nth-child(4).leave { transform: rotate(-2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(5) { z-index: 6; transform: rotate(3deg); } section:nth-child(5):before { content: "5"; } section:nth-child(5).leave { transform: rotate(3deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(6) { z-index: 5; transform: rotate(-2deg); } section:nth-child(6):before { content: "6"; } section:nth-child(6).leave { transform: rotate(-2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(7) { z-index: 4; transform: rotate(-2deg); } section:nth-child(7):before { content: "7"; } section:nth-child(7).leave { transform: rotate(-2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(8) { z-index: 3; transform: rotate(3deg); } section:nth-child(8):before { content: "8"; } section:nth-child(8).leave { transform: rotate(3deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(9) { z-index: 2; transform: rotate(-2deg); } section:nth-child(9):before { content: "9"; } section:nth-child(9).leave { transform: rotate(-2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } section:nth-child(10) { z-index: 1; transform: rotate(-2deg); } section:nth-child(10):before { content: "10"; } section:nth-child(10).leave { transform: rotate(-2deg) translateY(50em) scale3d(0.6, 0.6, 1); opacity: 0.3; } section.active { transform: rotate(0); background-color: #fff; } section.active article { opacity: 1; } </style> </head> <body> <p class="instruction">Click or use arrow keys to navigate</p> <div class="all"> <section class="active"> <article> <h1>Chapter 1</h1> <p>I was a smart child, but for a pointless reason. The entire effort was to impress my Dad. He took notice of me only when I was in his way. Class president, good athelete, math wiz. Fuck it. He didn't give a shit about any of it.</p> <p>The story goes that he became very weak in his early 30s. He would ask the neighbors to help him carry bags of groceries into the house.........完整代码请登录后点击上方下载按钮下载查看
网友评论0