css实现一个逼真三维翻书动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个逼真三维翻书动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* remember to use - transform-style: preserve-3d; */ html,body { height: 100%; overflow: hidden; } body { background: radial-gradient(#E4CEA6, #9C8763); -webkit-perspective: 900px; perspective: 900px; margin: 0; } #flip { -webkit-animation: wrapper 6s ease-in-out infinite; animation: wrapper 6s ease-in-out infinite; height: 350px; width: 253px; position: absolute; left: 50%; top: 30%; -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important; transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } @-webkit-keyframes wrapper { 50% { -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg); transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg); } } @keyframes wrapper { 50% { -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg); transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg); } } #flip div { height: 350px; width: 24px; position: absolute; left: calc(100% - 1px); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-size: 253px 350px; } #flip #front, #flip #front div { background-image: url(//repo.bfw.wiki/bfwrepo/image/5fb494a881d8d.png); box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px; } #flip #front > div > div > div > div > div > div > div > div > div > div { box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px; } #flip #back { -webkit-transform: rotateY(.4deg); transform: rotateY(.4deg); -webkit-transform-origin: -100% 0; transform-origin: -100% 0; } /* avoid pages overlap */ #flip #back, #flip #back div { background-image: url(//repo.bfw.wiki/bfwrepo/image/5fb493e7d621f.png); } #flip > div { left: 0; background-position-x: 0; } #flip div > div { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; } #flip div > div > div { background-position-x: -46px; } #flip div > div > div > div { background-position-x: -69px; } #flip div > div > div > div > div { background-position-x: -92px; } #flip div > div > div > div > div > div { background-position-x: -115px; } #flip div > div > div > div > div > div > div { background-position-x: -138px; } #flip div > div > div > div > div > div > div > div { background-position-x: -161px; } #flip div > div > div > div > div > div > div > div > div { background-position-x: -184px; } #flip div > div > div > div > div > div > div > div > div > div { background-position-x: -207px; } #flip div > div > div > div > div > div > div > div > div > div > div { background-position-x: -229px; } /* the more pieces you have, the smoother the bend is */ @-webkit-keyframes page { 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); } 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes page { 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); } 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); } 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } #book { width: 248px; height: 350px; position: absolute; left: 50%; top: 30%; -webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg); transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0 0; } @-webkit-keyframes book { 25% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 50% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 100% { box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px; } } @keyframes book { 25% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 50% { box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px; } 100% { box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px; } } #book #top { -webkit-animation: book 6s ease-in-out infinite; animation: book 6s ease-in-out infinite; background: url(//repo.bfw.wiki/bfwrepo/image/5fb493b6abe4a.png); background-size: 100% 100%; background-position: 100%; box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px; height: 350px; width: 248px; position: absolute; left: 0; top: 0; } #book #bottom { background: #E7DED1; box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px, #35582C 1px 1px 0px 0px; height: 350px; width: 253px; position: absolute; -webkit-transform: translateZ(-40px); transform: translateZ(-40px); left: 0; top: 0; } #book #shadow { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0