如图，鼠标移动到图上，实现右上角翻页的效果，本例主要border边框的设置。

一、基本概念

<html>

    <head>

    <style>

        #demo{

            width:0;

            height:0;

            border:solid 50px;

            border-top-color: #f00 ;

            border-right-color: #ff0 ;

            border-bottom-color:#0f0;

            border-left-color:#00f;

        }

    </style>

    </head>

    <body>

    <div id="demo"></div>

    </body>

</html>

当元素width和height为0，此时的边框呈现如上图所示，相邻的两条边框可以组成新的三角形。

所以我们的翻页效果就是，蓝绿组成新的三角形（颜色设为相同），红黄组成新的三角形（颜色设为相同），并且边框宽度逐渐由0变大的过程。

如果要实现翻页边框的长宽比，则要对边界线两边的边框单独设置，本例即要单独设置红蓝边框或者黄绿边框

<html>

    <head>

    <style>

        #demo{

            width:0;

            height:0;

            border:solid 50px;

            border-top-color: #f00 ;

            border-right-color: #ff0 ;

            border-bottom-color:#0f0;

            border-left-color:#00f;

            border-width: 80px 80px 50px 50px;

        }

    </style>

    </head>

    <body>

    <div id="demo"></div>

    </body>

</html>

这是对上/右边框设置的效果。

完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>border-width效果</title>

    <style type="text/css">

        body {

            background-color: #eaf0f2;

        }

        .paper-flip {

          position: relative;

          width: 500px;

          height: 300px;

          margin: 0 auto;

        }

        /*image-layer*/

        .image-layer {

          width: 500px;

          height: 300px;

          overflow: hidden;

          position: absolute;

          top: 0;

          left: 0;

        }

        .image-layer img {

          width: 500px;

          cursor: pointer;

        }

        .image-layer:before {

          content: '';

          position: absolute;

          top: 0;

          right: 0;

          border-style: solid;

          border-width: 0;

          border-top-color: #fff ;

          border-right-color: #fff;

          border-bottom-color:rgba(0,0,0,0.5);

          border-left-color:rgba(0,0,0,0.5);

          border-radius: 0 0 0 4px;

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

          transition:all 0.4s ease-out;

        }

        .image-layer:hover:before{

          border-left-width:50px;

          border-top-width:30px;

        }

    </style>

</head>

<body>

    <div class="paper-flip" id="paper-flip">

      <div class="image-layer" id="image-layer">

        <img src="http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt="">

      </div>

    </div>

</body>

</html>

css实现翻页效果的更多相关文章

  1. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  2. HTML多图无缝循环翻页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

  4. 微信里经常看到的滑动翻页效果，slide

    上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...

  5. 简单做出HTML5翻页效果文字特效

    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...

  6. css3 利用perspective实现翻页效果和正方体 以及翻转效果

    要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...

  7. javascript移动端 电子书 翻页效果

    1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...

  8. 采用cocos2d－x lua 的listview 实现pageview的翻页效果之上下翻页效果

    --翻页滚动效果local function fnScrollViewScrolling( sender,eventType)    -- body    if eventType == 10 the ...

  9. turn.js 图书翻页效果

    今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 三 个地方要改动: 1.后台查出地址 注意的地方:1.地址要 ...

随机推荐

  1. css3伪类温故知新

    今天遇到一个问题.要求::after 和 ::before的 content:"content" 能够动态的进行变换,能被JavaScript操作. 百度了下,自己做了实验,发现有 ...

  2. iis6403、 iis7403.14

    iis6ie显示:您无权查看该网页,http错误403-禁止访问.chorme显示:Directory Listing Denied iis7显示:403.14-Forbidden Web 服务器被配 ...

  3. win8安装SQL Server 2005问题解决方法

    win8安装SQL Server 2005问题解决方法 1.正常安装任一版本的SQL Server 2005(最好安装企业版). 2.安装到SqlServer服务的时候提示启动服务失败(提示重试的时候 ...

  4. android JSON获取值String无法转换成JSONObject

    项目中,已经获取到服务器返回的XML,并且已经解析. value= (String) result.getProperty("Value").toString().trim();J ...

  5. 配置Windows下的PHP开发环境

    一.配置 Apache 开发环境: 二.配置 PHP 开发环境 配置 Apache 开发环境 0. 下载 Apache.由于官方只提供了源码包,我们要么自己编译要么使用别人提供的已经编译好的二进制包. ...

  6. 【.NET】Nuget包，把自己的dll放在云端

    //发布自己的nuget包,1.自己的api KEY,2.自己的类库,3.nuget打包工具https://npe.codeplex.com/releases/view/620126          ...

  7. Wireshark基本介绍和学习TCP三次握手

    wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...

  8. Java中getResourceAsStream的用法

    首先,Java中的getResourceAsStream有以下几种: 1. Class.getResourceAsStream(String path) : path 不以'/'开头时默认是从此类所在 ...

  9. Android进程保活

    Android进程回收机制 Low Memory Killer原理 微信团队原创分享:Android版微信后台保活实战分享(网络保活篇) 微信团队原创分享:Android版微信后台保活实战分享(进程保 ...

  10. 我的.NET自学之路

    我第一门语言接触的并不是.net,而是php刚学php感觉还好,但是一学到后面就有一点头晕乎乎的,我感觉没有一个好的编写php代码的编辑器.而且php是弱类型语言,感觉起来没有像c,java,c#这些 ...