如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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. centos 6x系统下源码安装mysql操作记录

    在运维工作中经常部署各种运维环境,涉及mysql数据库的安装也是时常需要的.mysql数据库安装可以选择yum在线安装,但是这种安装的mysql一般是系统自带的,版本方面可能跟需求不太匹配.可以通过源 ...

  3. sqlite常用查询

    做的小工具用到了sqlite,在查询上较sqlserver还是稍有差异,将常用操作汇总一下,慢慢收集和整理. --查询版本SELECT sqlite_version() AS 'SQLite Vers ...

  4. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  5. 【腾讯GAD暑期训练营游戏程序班】游戏中的设计模式作业说明文档

  6. 恢复 Windows 7 的“回到父目录”按钮

    Windows 7 使用以来很多方面一直不习惯,特别是让我无比纠结的”回到父目录“ 按钮从资源管理器中消失了. 不能不说这是一个失败! 很多时候,Win 7 地址栏中自以为是的显示的很多层目录层次的面 ...

  7. [转]win 10 开始菜单(Win 7风格)增强工具 StartIsBack++ v1.3.4 简体中文特别版

    Windows10开始菜单增强工具StartIsBack++现已更新至v1.3.4,最近主要修复在Win10周年更新版上恢复睡眠后任务栏通知中心按钮消失的问题.升级版对StartIsBack+全新构建 ...

  8. BZOJ 3781: 小B的询问

    3781: 小B的询问 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 643  Solved: 435[Submit][Status][Discuss ...

  9. Python 面向对象 基础

    编程范式概述:面向过程 和 面向对象 以及函数式编程 面向过程:(Procedure Oriented)是一种以事件为中心的编程思想. 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现 ...

  10. JavaScript学习1

    http://blog.csdn.net/lilongsheng1125/article/details/8479391 数据类型 1.基础数据类型 数值型.字符串型.逻辑型.undefined.nu ...