<!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. HBase单节点的安装与配置

    HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/   hbase-1.2.6-bin是直接编译好的,直接安装.   hbase- ...

  2. 使用AtomicInteger原子类代替i++线程安全操作

    Java中自增自减操作不具原子性,在多线程环境下是线程不安全的,可以使用使用AtomicInteger原子类代替i++,i--操作完成多线程线程安全操作. 下面是等于i++多线程的自增操作代码: pu ...

  3. MyBatis3教程

    MyBatis3教程: http://www.yihaomen.com/article/java/302.htm http://www.mybatis.org/mybatis-3/zh/index.h ...

  4. Luca Canali

    https://github.com/LucaCanali http://cern.ch/canali/

  5. open redis port for remote connections

    edit /etc/redis.conf Add below line after bind 127.0.0.1, then try redis-cli -h xxx.xxx.xxx.xxx ping ...

  6. C++成员对齐方式探讨

    本文參考了<高质量程序设计指南--C++/C语言>一书 有不妥之处恳请指正 一.自然对齐 某些基于RISC(精简指令集)的CPU比方SPARC.PowerPC等.採用高字节和高字在低地址存 ...

  7. iOS开发- SceneKit

    打开你的Xcode 6然后新建一个项目,选择iOS/Application/Game模板然后点击Next. 将项目命名为QuickStart,选择开发语言为Swift,然后游戏选用的平台技术选择为Sc ...

  8. java文件和目录的增删复制

    在使用java进行开发时常常会用到文件和目录的增删复制等方法.我写了一个小工具类.和大家分享,希望大家指正: package com.wangpeng.utill; import java.io.Fi ...

  9. Android横竖屏切换不重新调用onCreate()

    再次感叹Android的碎片化!!!! 设置AndroidManifest.xml中Activity的android:configChanges=”keyboardHidden|orientation ...

  10. Silverlight 2学习笔记二：三个基本布局控件(Canvas、StackPanel、Grid )

    这篇文章主要是翻译了ScottGu博客的文章:Silverlight Tutorial Part 2: Using Layout Management.虽然是翻译,但通过笔记记录,我发现对这三个布局控 ...