<!DOCTYPE html>

<html>  

<head>

    <meta charset="utf-8" />

    <title>翻书的效果</title>

<style>

body{

    background-color:#A0A0A4;

    }

.book-wrapper{

    width: calc(100%/5);

    }

.book-notbook{

    margin:20px;

    position:relative;

    width: 175px;

    height: 250px;

    transition:.5s linear;

    transform-origin:left center 0;

    }    

  .book-notbook:hover{

    transform:rotateZ(-5deg);

    }

.book-cover{

    position:absolute;

    background-color:#FF8080;

    width: 175px;

    height: 250px;

    z-index:10;

    border-radius:4px 15px 15px 4px;

    transition: all .5s linear;

    transform-origin:left center 0;

    }

  .book-notbook:hover .book-cover{

    transform:rotateY(-75deg);

    box-shadow: 20px 10px 50px rgb(0,0,0,.2);

    }

.book-cover:before{

    position:absolute;

    right:10%;

    top:-1px;

    content:" ";

    width:10px;

    height:calc(100% + 2px);

    border-radius:2px;

    z-index:100;

    transition: 2s ease;

    background:linear-gradient(to right,#9c2e2b 0%,  #cc4b48 15%, #9c2e2b 30%,  #cc4b48 45%, #9c2e2b 60%,  #cc4b48 75%, #9c2e2b 90%,  #cc4b48 100%)

    }

.book-title{

    position:relative;

    height:50px;

    top:80px;

    background-color:#fff;

    padding:10px 20px;

    font-size:14px;

    }

.book-title:before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:10px;

    background-color:#7FFFFF;

    }

.book-content{

    position:absolute;

    top:0;

    border-radius:4px 15px 15px 4px;

    width:175px;

    height:250px;

    background-color:#fbfae8;

    overflow: hidden;

    z-index:0;

    }    

.book-content.dotted{

    transition:.5s linear;

    transform-origin:left center 0;

    }

.page1{

    background:linear-gradient(90deg, #FFA 10px, transparent 1%) center,linear-gradient(#FFA 10px, transparent 1%) center, #FCF;

    background-size: 11px 11px;

    z-index:3;

    }

.book-content:hover.page1{

    transform:rotateY(-70deg);

    box-shadow: 20px 10px 50px rgb(0,0,0,.2);

    }    

.page2{

    background:linear-gradient(90deg, #CCF 10px, transparent 1%) center,linear-gradient(#CCF 10px, transparent 1%) center, #D40000;

    background-size: 11px 11px;

    z-index:2;

    }

.page3{

    z-index:1;

    background:linear-gradient(90deg, #fbfae8 10px, transparent 1%) center,linear-gradient(#fbfae8 10px, transparent 1%) center, #999;

    background-size: 11px 11px;

    }

.moleskine-wrapper {

  max-width: calc(100% / 4);

}

.moleskine-notebook {

  height: 250px;

  width: 175px;

  position: relative;

  transition: .5s linear;

  border-radius: 5px 15px 15px 5px;

  transform-origin: left center 0px;

  /* display: inline-block; */

  margin: 30px;

}

.moleskine-notebook:hover {

  transform: rotateZ(-10deg);

}

.moleskine-notebook:hover .notebook-cover {

  transform: rotateY(-50deg);

  z-index: 999;

  box-shadow: 20px 10px 50px rgba(0, 0, 0, 0.2);

}

.notebook-cover {

  background: #cc4b48;

  height: 250px;

  width: 175px;

  position: absolute;

  border-radius: 5px 15px 15px 5px;

  z-index: 10;

  transition: .5s linear;

  transform-style: preserve-3d;

  transform-origin: left center 0px;

}

.notebook-cover:before {

  content: "";

  position: absolute;

  width: 10px;

  height: calc(100% + 2px);

  top: -1px;

  z-index: 100;

  border-radius: 2px;

  right: 25px;

  transition: 2s ease;

  background: linear-gradient(to right, #9c2e2b 0%, #cc4b48 12%, #9c2e2b 25%, #cc4b48 37%, #9c2e2b 50%, #cc4b48 62%, #9c2e2b 75%, #cc4b48 87%, #9c2e2b 100%);

}

.notebook-cover.yellow {

  background: #fed754;

}

.notebook-cover.yellow:before {

  background: linear-gradient(to right, #ebb501 0%, #fed754 12%, #ebb501 25%, #fed754 37%, #ebb501 50%, #fed754 62%, #ebb501 75%, #fed754 87%, #ebb501 100%);

}

.notebook-skin {

  height: 50px;

  background: #e8e8e0;

  margin-top: 80px;

  padding: 15px;

  font-size: 12px;

  position: relative;

  z-index: 10;

  color: #222;

  text-align: left;

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

}

.notebook-skin:before {

  content: '';

  position: absolute;

  width: 100%;

  height: 15px;

  left: 0;

  bottom: 0;

  background: #cddc39;

}

.notebook-page {

  height: 100%;

  width: 175px;

  position: absolute;

  background-color: #fbfae8;

  z-index: 0;

  border-radius: 5px 16px 16px 5px;

  overflow: hidden;

}

.notebook-page.squared {

  background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);

  background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;

}

</style>

</head>  

<body>

    <div class="book-wrapper">

        <div class="book-notbook">

           <div class="book-cover">

                   <div class="book-title">

                   Change World

                </div>

           </div>

           <div class="book-content dotted page1"></div>

           <div class="book-content dotted page2"></div>

           <div class="book-content dotted page3"></div>

        </div>

    </div>

    <div class="moleskine-wrapper">

    <div class="moleskine-notebook">

      <div class="notebook-cover yellow">

        <div class="notebook-skin">MOLESKINE</div>

      </div>

      <div class="notebook-page squared"></div>

    </div>

  </div>

</body>

</html>

css3 绘制书本的更多相关文章

  1. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  2. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  3. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  4. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  5. css3绘制腾讯logo

    CSS3绘制的腾讯LOGO,下边是对比图. 演示地址

  6. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  7. CSS3绘制砖墙-没实用不论什么图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用 CSS3 绘制 Hello Kitty

    偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...

  9. 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

    1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...

随机推荐

  1. 使用pycharm学习django纪实

    之前已经下了python3.7 首先官网下载pycharm专业版,然后利用学生邮箱激活 新建django项目,使用虚拟环境就好了,方便之后的服务器部署(大概 找到博客开始学习:https://blog ...

  2. sheepdog简介

    1.corosync,single ring最多支持50个节点:zookeeper,500个节点可稳定支撑,1000-1500个节点挑战比较大,需要优化消息传递机制. 2.sheepdog一开始为分布 ...

  3. Linux下汇编语言学习笔记77 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  4. HTML表单数据转JSON

    问题描述 后端使用如下方式接收前端传入参数: @PostMapping(value = "/test", produces = MediaType.APPLICATION_JSON ...

  5. 关于使用freemarker导出word

    java使用FreeMarker导出word 一.      先做一个word模板 二.      将该word文件另存为xml格式(注意是另存为,不是直接改扩展名) 三.     打开xml文件把要 ...

  6. Ubuntu 16.04安装PPA图形化管理工具Y PPA Manager

    安装: sudo add-apt-repository ppa:webupd8team/y-ppa-manager sudo apt-get update sudo apt-get install y ...

  7. SiteMesh2-标签库

    SiteMesh包括两大标签库. 一.Decorator Tags:被用于建立装饰器页面. 1.<decorator:head/>  插入原始页面(被包装页面)的head标签中的内容(不包 ...

  8. pga_aggregate_target, sga_target, memory_target

    对于这三个参数有一些了解,但是又有一些疑惑. pga_aggregate_target 最初的了解: 这个参数控制着PGA的大小,如果work_area_policy 设置成auto,则oracle采 ...

  9. 3.3－ISDN

    3.3-ISDN     综合业务数字网ISDN(Integrated Services Digital Network):     ISDN主要有两种接口类型:分为BRI(2B+D=2×64+16K ...

  10. 深入学习理解java-ThreadLocal

    导读 首先,ThreadLocal 不是用来解决共享对象的多线程訪问问题的,普通情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其它线程是不须要訪问的,也訪问不到 ...