<!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. springboot项目--传入参数校验-----SpringBoot开发详解（五）--Controller接收参数以及参数校验----https://blog.csdn.net/qq_31001665/article/details/71075743

    https://blog.csdn.net/qq_31001665/article/details/71075743 springboot项目--传入参数校验-----SpringBoot开发详解(五 ...

  2. Leetcode 76.最小覆盖子串

    最小覆盖子串 给定一个字符串 S 和一个字符串 T,请在 S 中找出包含 T 所有字母的最小子串. 示例: 输入: S = "ADOBECODEBANC", T = "A ...

  3. nyoj 113 字符串替换 (string中替换函数replace()和查找函数find())

    字符串替换 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 编写一个程序实现将字符串中的所有"you"替换成"we"   输入 ...

  4. 1874 Bellman-ford算法 队列优化过的 用于稀疏图，有负权的图

    #include<stdio.h> #include<algorithm> #include<iostream> #include<queue> usi ...

  5. codevs1197 Vigenère密码

    题目描述 Description 16 世纪法国外交家Blaise de Vigenère设计了一种多表密码加密算法——Vigenère密码.Vigenère 密码的加密解密算法简单易用,且破译难度比 ...

  6. RSYNC最简实施

    只是内网同步,故而可以省略很多安全方面的东东.不需要通过ssh,而是通过rsync协议.不需要用户名认证,保证只读. rsync用standalone的daemon方式,而不用service方式操作. ...

  7. [bzoj1577][Usaco2009 Feb]庙会捷运Fair Shuttle_贪心_线段树

    庙会捷运 Fair Shuttle bzoj-1577 Usaco-2009 Feb 题目大意:有一辆公交车从1走到n.有m群奶牛从$S_i$到$E_i$,第i群奶牛有$W_i$只.车有一个容量c.问 ...

  8. 8、Java并发性和多线程-静态条件与临界区

    以下内容转自http://ifeve.com/race-conditions-and-critical-sections/: 在同一程序中运行多个线程本身不会导致问题,问题在于多个线程访问了相同的资源 ...

  9. 基于FFI模块CAPI与JavaScript的各种类型匹配总结

    0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值 传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了 ...

  10. ubuntu18.04安装magento2

    magento2更新很快,使用的技术都是很前沿的,国内外的技术帖子又很少,安装的时候难免会遇到各种各样的问题.我们单位因为是外资,总部在国外,最近在自主开发电商网站,开发语言是php,首选了magen ...