如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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. Spring源码分析——BeanFactory体系之抽象类、类分析（二）

    上一篇分析了BeanFactory体系的2个类,SimpleAliasRegistry和DefaultSingletonBeanRegistry——Spring源码分析——BeanFactory体系之 ...

  2. RPM命令用法

    安装一个包 rpm –ivh 升级一个包 rpm -Uvh 移走一个包 rpm -e 4.校验rpm包 rpm -V < rpm package name> 5.查询一个包是否被安装 rp ...

  3. 使用jQuery加载script脚本

    原文链接: Loading Scripts with jQuery JavaScript loaders加载器简单强大而又非常有用.我在博客上介绍过其中一些,例如 curljs  和 LABjs ,也 ...

  4. Ext小总结

    titleCollapse:true,//高级搜索点击隐藏显示 添加按钮 >弹出页面 1.添加按钮 //核销  在控制层页面添加页面路径>添加操作按钮>window.allOrder ...

  5. E - Super Jumping! Jumping! Jumping!

    /* Nowadays, a kind of chess game called "Super Jumping! Jumping! Jumping!" is very popula ...

  6. canvas链式弹性运动

    上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...

  7. jquery 将disabled的元素置为enabled的三种方法

    转--http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disab ...

  8. CSS3幻灯片制作心得

    大神勿喷,这是小弟自己学习的痕迹. CSS3动画效果核心代码 @keyframes slideLeft { 0% { left: -500px; } 100% { ; } } @keyframes s ...

  9. 上传AppStore出现:Unexpected CFBundleExecutable Key 错误

    解决办法:就是把无用的CFBundle删除掉. 根据提示,找到对应第三方的SDK, 找到第三方的info.plist文件,删除里面的Executable file对应的一整行,包括值.

  10. Jstat PID not found

    解决步骤 删除/tmp/hsperfdata_{USER}文件夹,如果是root用户登录,即为/tmp/hsperfdata_root 通过chown.chmod命令保证执行jstat用户必定拥有对/ ...