如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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. apache服务器启动时提示httpd: apr_sockaddr_info_get() failed for

    apache服务器启动时提示httpd: apr_sockaddr_info_get() failed for 在RedHat Linux 5 与 CentOS 5服务器上配置好apache后,启动或 ...

  2. MVP模式（Android）

    以前在写项目的时候,没有过多考虑架构模式的问题,因为之前一直做J2EE开发,而J2EE都是采用MVC模式进行开发的,所以在搭建公司项目的时候,也是使用类似MVC的架构(严格来讲,之前的项目还算不上MV ...

  3. 关于Advanced Installer 11.0打包软件过程一些记录

    1.想要安装后在默认网站下为一个虚拟目录,IIs,Web应用程序,选中虚拟目录是一个Web应用程序.同时修改常规>文件夹,重新指向网站文件所在目录,不然会少一级目录 2.如果想单独的应用程序池, ...

  4. 基于FPGA的飞机的小游戏

    基于FPGA的飞机的小游戏 实验原理 该实验主要分为4个模块,采用至上而下的设计方法进行设计.由50M的晶振电路提供时钟源,VGA显示控制模块.图形显示控制模块.移动模块的时钟为25M,由时钟分频电路 ...

  5. AnimationsDemo中的ZoomActivity代码分析

    AnimationsDemo是android官网的一个动画使用示例. ZoomActivity是demo中的图像缩放动画,因为这种效果比较常见,所以研究了一下代码. 下面是效果图: 毫无疑问这是一个组 ...

  6. mysql5.7.10 的源码安装

    mysql 5.7.10的源码安装:http://fyduan.blog.51cto.com/4234935/1729873cmake . -DCMAKE_INSTALL_PREFIX=/usr/lo ...

  7. 关于XML序列化与CultureInfo

    不同的计算机系统可能有着不同的CultureInfo,例如在中文环境下日期通常这样显示03/30/2016,而在有的操作系统下它可能是这样的30.3.2016. 这样的话带来一个问题,例如在中文环境下 ...

  8. cxf设置代理访问webservice接口

    由于业务上的需要,需要访问第三方提供的webservice接口,但由于公司做了对外访问的限制,不设置代理是不能外网的,如果使用http设置代理访问外网还是比较容易的,但使用cxf有点不知道从哪里入手. ...

  9. 使用自定义tld标签简化jsp的繁琐操作

    最近做一个树形结构的展示,请求目标页面后,后台只返回简单的List,虽然有想过在jsp页面内做一些操作简化,但是太繁琐了,其他的标签又不能满足需求,所以只能自己做一个.使用tld标签可以简化jsp代码 ...

  10. Linux 远程复制文件

    Linux 远程复制文件 如果想把机器A上面的dir目录下面的所有文件复制到机器B的dir目录下,我们可以使用nc命令来完成 在机器A的dir目录下面执行: tar -czf - * | nc -l ...