turn实现一个书籍书本打开翻书翻页效果代码
代码语言:html
所属分类:其他
代码描述:turn实现一个书籍书本打开翻书翻页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap"); /** Theme **/ /** Dimensions **/ /** Font Sizes **/ /** mixins **/ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Source Sans Pro', sans-serif; -webkit-tap-highlight-color: transparent; } .container { position: relative; width: 100vw; height: 100vh; background-color: #2F2F2F; display: flex; justify-content: center; align-items: center; } .container .hint { position: absolute; bottom: 25px; color: #D9D9D9; } .container .mobile { width: 280px; height: 450px; padding: 15px; } .container .mobile .content { position: relative; width: calc(280px - (2 * 15px)); height: calc(450px - (2 * 15px)); border-radius: 10px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); background-color: #fff; overflow: hidden; perspective: 1200px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .container .mobile .content .book { position: relative; user-select: none; display: flex; justify-content: center; align-items: center; } .container .mobile .content .book .cover { position: absolute; width: 150px; height: 225px; background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb5e82a9230f.png"); background-repeat: no-repeat; background-size: cover; border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 10px; box-shadow: 0 12px 6px -6px rgba(0, 0, 0, 0.4), -8px 12px 6px -6px rgba(0, 0, 0, 0.2), 8px 12px 6px -6px rgba(0, 0, 0, 0.2); transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1); } .container .mobile .content .book .cover.active { width: 100%; height: 100%; transform: rotateY(-180deg); transform-origin: top left; } .container .mobile .content .book .cover .bend { content: ''; position: absolute; width: 2px; height: 100%; left: 10px; background-color: rgba(0, 0, 0, 0.25); box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4); } .container .mobile .content .book .cover:hover { cursor: pointer; } .container .mobile .content .book .pages { border-radius: 10px; } .container .mobile .content .book .pages .page { position: relative; background-color: #fff; } .container .mobile .content .book .pages .pages-content { text-align: center; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; padding: 15px; display: flex; justify-content: center; align-items: center; } .container .mobile .content .book .pages .pages-content .content-inner { text-align: center; opacity: 0; } .container .mobile .content .book .pages .pages-content .content-inner .title { font-size: 18px; font-weight: 400; padding-bottom: 10px; color: #444444; } .container .mobile .content .book .pages .pages-content .content-inner .text { text-align: justify; font-size: 12px; font-weight: 300; color: #444444; } .container .mobile .content .book .pages .pages-content .page-number { position: absolute; bottom: 15px; font-size: 12px; font-weight: 300; color: #444444; } .container .mobile .content .book .pages:hover { cursor: pointer; } .container .mobile .content.active { position: relative; } .hide { display: none !important; } </style> </head> <body> <div class="container"> <div class="hint">* 点击书打开它!</div> <div class="mobile"> <div class="content"> <div class="book"> <div class="cover"> <div class="bend"></div> </div> <div class="pages hide"> <div class="page"> <div class="pages-content"> <div class="content-inner"> <div class="title">Chapter 1</div> <div class="text"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0