文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么使用纯CSS实现书籍3D翻页效果

2023-06-08 10:15

关注

这篇文章主要介绍了怎么使用纯CSS实现书籍3D翻页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

使用纯CSS实现书籍3D翻页效果,代码如下:

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>cloth</title>  <style>   html,body {  height:100%;  overflow: hidden;}body {  background: -webkit-radial-gradient(#E4CEA6, #9C8763);  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)!important;          transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!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(https://file.lsjlt.com/upload/202306/07/bwmcbbyemaw.jpg);  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(.2deg); transform: rotateY(.2deg); } #flip #back,#flip #back div {  background-image: url(https://file.lsjlt.com/upload/202306/07/bwmcbbyemaw.jpg); }#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; }@-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(https://file.lsjlt.com/upload/202306/07/ncvp5vheasj.jpg);  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 {  -webkit-animation: shadow 6s ease-in-out infinite;          animation: shadow 6s ease-in-out infinite;  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;  height: 350px;  width: 248px;  position: absolute;  left: -100%;  top: 0;  -webkit-transform: translateZ(-40px);          transform: translateZ(-40px);}@-webkit-keyframes shadow {  20% {    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;  }  50% {     box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;  }  60% {     box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;  }}@keyframes shadow {  20% {    box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;  }  50% {     box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;  }  60% {     box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;  }}#book #front {  background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);  background-size: 100% 2px;   box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;  height: 40px;  width: 251px;    left: -3px;  position: absolute;  bottom: -40px;  -webkit-transform: rotateX(-90deg);          transform: rotateX(-90deg);  -webkit-transform-origin: 50% 0;          transform-origin: 50% 0;  border-top-left-radius: 5px;  border-bottom-left-radius: 5px;}#book #right {  background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);  background-size: 2px 100%;   box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;  height: 100%;  width: 40px;  position: absolute;  right: -40px;  top: 0;  -webkit-transform: rotateY(90deg);          transform: rotateY(90deg);  -webkit-transform-origin: 0 50%;          transform-origin: 0 50%;}h5 {  position: absolute;  bottom: 20px;  left: 20px;  margin: 0;  font-weight: 200;  opacity: 1; font-family: sans-serif;  color: rgba(0,0,0,0.3); }#bookmark {  position: absolute;  -webkit-transform: translate3d(20px,350px,-16px);          transform: translate3d(20px,350px,-16px);  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;}#bookmark div {  background: rgb(151, 88, 88);  box-shadow: rgb(133,77,77) 1px 0;  height: 10px;  width: 20px;  position: absolute;  top: 9px;  -webkit-transform: rotateX(-14deg);          transform: rotateX(-14deg);  -webkit-transform-origin: 50% 0;          transform-origin: 50% 0;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;}#bookmark > div > div {  background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));}#bookmark > div > div > div {  background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));  background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));}#bookmark > div > div > div > div {  background: none;  border-top: 0px solid transparent;  border-right: 10px solid rgb(133, 77, 77);  border-bottom: 10px solid transparent;  border-left: 10px solid rgb(133, 77, 77);  height: 0;  width: 0;}#bookmark-shadow {  background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));  background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));  height: 15px;  width: 20px;  position: absolute;  -webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);          transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);  -webkit-transform-origin: 0 0;          transform-origin: 0 0;}  </style></head>  <body>    <div id='book'>  <div id='top'></div>  <div id='front'></div>  <div id='right'></div>  <div id='bottom'></div>  <div id='shadow'></div>  <div id='bookmark'>    <div>      <div>        <div>          <div></div>        </div>      </div>    </div>  </div>  <div id='bookmark-shadow'></div></div><div id='flip'>  <div id='front'>    <div>      <div>        <div>          <div>            <div>              <div>                <div>                  <div>                    <div>                      <div></div>                    </div>                  </div>                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div>  <div id='back'>    <div>      <div>        <div>          <div>            <div>              <div>                <div>                  <div>                    <div>                      <div></div>                    </div>                  </div>                </div>              </div>            </div>          </div>        </div>      </div>    </div>  </div></div><h5>CSS实现3D翻书效果</h5></body></html>

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么使用纯CSS实现书籍3D翻页效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯