CSS3 制作的书本翻页特效


Posted in HTML / CSS onApril 13, 2021

实现效果:

CSS3 制作的书本翻页特效

实现代码:

html

<!-- Please heart it if you like! -->
<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>
<h4>CSS 3D Bending Effect - Page Flip</h4>

CSS3

/* remember to use - transform-style: preserve-3d; */
html,body {
  height:100%;
  overflow: hidden;
}
body {
  background: radial-gradient(#E4CEA6, #9C8763);
  perspective: 900px;
  margin: 0;
}
#flip {
  animation: wrapper 6s ease-in-out infinite;
  height: 350px;
  width: 253px; 
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
}
@keyframes wrapper {
  50% {
    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }
}
#flip div {
  height: 350px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  transform-origin: 0 100%;
  transform-style: preserve-3d;
  background-size: 253px 350px;
}
#flip #front, 
#flip #front div {
  background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.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 { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
#flip #back,
#flip #back div {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
}

#flip > div {  left: 0;  background-position-x: 0; }
#flip div > div { background-position-x: -23px; 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 */

@keyframes page {
  15% { transform: rotateY(-10deg); }
  50% { transform: rotateY(-2deg); }
  65% { transform: rotateY(10deg); }
  100% { transform: rotateY(0deg); }
}

#book {
  width: 248px;
  height: 350px;
  position: absolute;
  left:50%;
  top: 30%;
  transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 0 0;
}
@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 {
  animation: book 6s ease-in-out infinite;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.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;
  transform: translateZ(-40px);
  left: 0;
  top: 0;
}
#book #shadow {
  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;
  transform: translateZ(-40px);
}
@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;
  transform: rotateX(-90deg);
  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;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
}

h4 {
  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 */

#bookmark {
  position: absolute;
  transform: translate3d(20px,350px,-16px);
  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;
  transform: rotateX(-14deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
#bookmark > div > div {
  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > div > div > div {
  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: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  height: 15px;
  width: 20px;
  position: absolute;
  transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
  transform-origin: 0 0;
}

以上就是CSS3 制作的书本翻页特效的详细内容,更多关于CSS3 书本翻页特效的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
css 中多种边框的实现小窍门
HTML中table表格拆分合并(colspan、rowspan)
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python关于反射的实例代码分享
2020/02/20 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
numba提升python运行速度的实例方法
2021/01/25 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
酒店工程部经理岗位职责
2015/04/09 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL