<!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. Ajax提交post请求返回404错误

    最近使用ajax提交表单的时候,发现无法执行success函数,后台的代码也正常执行了,但是就是无法执行success函数,执行error函数,返回的错误代码时404.显然是找不到请求的url. 可是 ...

  2. codeforces gym 100357 I (费用流）

    题目大意 给出一个或与表达式,每个正变量和反变量最多出现一次,询问是否存在一种方案使得每个或式中有且仅有一个变量的值为1. 解题分析 将每个变量拆成三个点x,y,z. y表示对应的正变量,z表示对应的 ...

  3. Eddy's mistakes

    Problem Description Eddy usually writes  articles ,but he likes mixing the English letter uses, for ...

  4. sql server 2016

    https://www.microsoft.com/zh-cn/server-cloud/products/sql-server/

  5. HDU1026 Ignatius and the Princess I 【BFS】+【路径记录】

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  6. [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS

    You most likely already have data or properties in your template which are controlled by third-party ...

  7. layoutSubviews, setNeedsLayout, layoutIfNeeded

    layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit——————- - (voi ...

  8. 【MVC框架】——View和Controller之间的传值

    在MVC中,Controller运行一个能够说是路由功能.它通过View传过来的数据,来决定应该调用哪一个Model,相同会把Model处理完的数据传给View,所以就总是涉及到Controller和 ...

  9. android实现跑马灯效果（能够实现两个以上跑马灯）

    本文用了继承自TextView的MarqueeTextView来实现跑马灯效果.原因是,跑马灯效果是须要TextView拥有焦点才会跑动的.而有时候TextView获得焦点会有点耗时,造成要等待一段时 ...

  10. Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）

    首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...