vue实现翻书书本翻页效果
代码语言:html
所属分类:动画
代码描述:vue实现翻书书本翻页效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap"); html, body { width: 100%; height: 100vw; margin: 0; } body { color: #333; font-family: "Cute Font", cursive; background: #dedfdf; overflow: hidden; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } *:before, *:after { content: ""; position: absolute; } .container { margin: auto; } .album { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 1s; transition: 1s; margin: auto; width: 600px; height: 700px; -webkit-transform: scale(0.5); transform: scale(0.5); } .album--open { -webkit-transform: rotateX(35deg) rotateY(0deg) rotateZ(35deg) scale(0.5); transform: rotateX(35deg) rotateY(0deg) rotateZ(35deg) scale(0.5); } .album__paper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 1s; transition: 1s; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .album__paper:not(.first) .album__page { background: #f1f0f0; background-size: 100% 1.5em; } .album__paper:not(.first) .back { background: #d4d3d3; } .album__paper:nth-of-type(1) .back { background: #0095a3; } .album__paper:nth-of-type(1) .album__page { background: #0095a3; } .album__paper.open { box-shadow: 0 1em 0 0 #aaa; -webkit-transform: rotateX(0) rotateY(-180deg) rotateZ(0); transform: rotateX(0) rotateY(-180deg) rotateZ(0); } .album__paper .album__page.front { transition: 1s; -webkit-transition: 1s; transform-origin: 0 50%; -webkit-transform-origin: 0 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .album__paper .back { transition: 1s; -webkit-transition: 1s; transform-origin: 0 50%; -webkit-transform-origin: 0 50%; background: #e1e1e1; } .album__top-title { font-size: 100px; line-height: 0.8; padding: 20px; } .album__page { width: 100%; height: 100%; position: absolute; -webkit-transform: translateZ(0px); transform: translateZ(0px); } .album__back { width: 3em; height: 700px; background: #007e8a; position: absolute; left: -3em; top: 0; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotateY(-90deg) rotateX(0deg); -webkit-transform: rotateY(-90deg) rotateX(0deg); } .album__shadow { position: absolute; top: 0; left: 0; width: 600px; height: 700px; background: transparent; transform: translateZ(-3em); -webkit-transform: translateZ(-3em); box-shadow: 1em 1em 0px 0px #aaa; z-index: 1; } .album__bottom { width: 600px; height: 3em; background: #d4d3d3; position: absolute; bottom: 0; left: 0; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotateX(90deg); -webkit-transform: rotateX(90deg); } .cat-mark { position: relative; width: 200px; height: 170px; background: #333; border-radius: 60% 60% 90px 90px; margin: 150px auto auto; } .cat-mark:before, .cat-mark:after { top: -25px; width: 0; height: 0; border-bottom: 80px solid #333; border-right: 50px solid transparent; border-left: 50px solid transparent; border-radius: 33px; } .cat-mark:before { right: -20px; transform: rotate(32deg); -webkit-transform: rotate(32deg); } .cat-mark:after { left: -20px; transform: rotate(-32deg); -webkit-transform: rotate(-32deg); } .top-content { height: 100%; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; } .content { height: 100%; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 100px auto; } .content__title { grid-row: 1; grid-column: 1 / 3; font-size: 100px; line-height: 0.8; padding: 20px; box-sizing: border-box; } .content__img1 { grid-row: 2 / 4; grid-column: 1 / 2; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; box-sizing: border-box; } .content__img1 img { margin: auto; width: 90%; border: 10px solid #fff; box-sizing: border-box; } .content__img2 { grid-row: 3 / 4; grid-column: 2 / 4; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; box-sizing: border-box; } .content__img2 img { margin: auto; width: 80%; border: 10px solid #fff; box-sizing: border-box; } .content__img3 { grid-row: 2; grid-column: 2; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; box-sizing: border-box; } .content__img3 img { margin: auto; width: 60%; border: 10px solid #fff; box-sizing: border-box; } .content__text { width: 100%; padding: 30px; font-size: 30px; box-sizing: border-box; } </style> </head> <body translate="no"> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0