如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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. mysql 有两种数据库引擎发音

    mysql 有两种数据库引擎 一种是 MyISAM,一种是 InnoDB MyISAM 发音为 "my-z[ei]m"; InnoDB 发音为 "in-no-db&quo ...

  2. mysqli_fetch_assoc php的新的库函数

    注释:mysql_fetch_assoc() 函数 定义和用法mysql_fetch_assoc() 函数从结果集中取得一行作为关联数组. 返回根据从结果集取得的行生成的关联数组,如果没有更多行,则返 ...

  3. React基础知识

    学习文档(按优先级排列)http://reactjs.cn/react/docs/tutorial-zh-CN.htmlhttp://www.cnblogs.com/Mrs-cc/p/4969755. ...

  4. 微信扫描打开APP下载链接提示代码优化

    上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS.js+html.jQuery+HTML代码.今天来一个简化版带可以关闭的按钮操作.使用的是纯JS+H ...

  5. ajax 请求另一个html页面的指定的一部分 加载到本页面div

    $.ajax( { url: url, //这里是静态页的地址 type: "GET", //静态页用get方法,否则服务器会抛出405错误 success: function(d ...

  6. [CareerCup] 6.6 Toggle Lockers 切换锁的状态

    6.6 There are 100 closed lockers in a hallway. A man begins by opening all 100 lockers. Next, he clo ...

  7. Spring.Net 简单入门学习

    Spring.NET IoC容器的用法. 通过简单的例子学习Spring.Net 1.先创建一个控制台程序项目. 2.添加IUserInfoDal 接口. namespace Spring.Net { ...

  8. Ubuntu 14.04.4官方默认更新源sources.list

    Ubuntu 14.04.4官方默认更新源sources.list # deb cdrom:[Ubuntu LTS _Trusty Tahr_ - Release amd64 (20160217.1) ...

  9. 数据结构图文解析之：二叉堆详解及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  10. 【bzoj1059】 ZJOI2007—矩阵游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1059 (题目链接) 题意 一个01矩阵,可以任意交换两行或两列,问能否经过若干次交换后使主对角线全为 ...