css实现翻页效果
如图，鼠标移动到图上，实现右上角翻页的效果，本例主要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实现翻页效果的更多相关文章
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- HTML多图无缝循环翻页效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5开发的翻页效果实例
简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...
- 微信里经常看到的滑动翻页效果，slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...
- 简单做出HTML5翻页效果文字特效
之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...
- css3 利用perspective实现翻页效果和正方体 以及翻转效果
要点: 1 实现3D效果就需要使用perspective属性 1 页面旋转使用css3的rorate 2 使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素 ...
- javascript移动端 电子书 翻页效果
1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...
- 采用cocos2d－x lua 的listview 实现pageview的翻页效果之上下翻页效果
--翻页滚动效果local function fnScrollViewScrolling( sender,eventType) -- body if eventType == 10 the ...
- turn.js 图书翻页效果
今天用turn.js 做图书的翻页效果遇到问题: 图片路径总是出错 调了一天,总算调出来了 我用的thinkphp,其他的不知道是不是一样 三 个地方要改动: 1.后台查出地址 注意的地方:1.地址要 ...
随机推荐
- SQL获取本周、本月、本季度的记录的语句
前提条件:假设表名为:tableName:时间字段名为:theDate ①查询本周的记录 select * from tableName where DATEPART(wk, theDate) = D ...
- HTML5入门（CSS样式-------------------（CSS基础知识点----------------------------））
CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg: <style> div{ ...
- 【跟着子迟品 underscore】JavaScript 数组展开以及重要的内部方法 flatten
Why underscore (觉得这一段眼熟的童鞋可以直接跳到正文了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...
- redis主从同步
本文是在window环境下的主从同步 1.redis是如何实现主从同步的 redis会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件,并且在此基础上实现了master-slave(主从) ...
- CDH安装
离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, incl ...
- RPC
那是N年前的一天,老王在看一本讲java的技术书(可惜忘了叫啥名字了),突然看到有一章讲RMI的,立马就觉得很好奇.于是乎,就按书上所讲,写了demo程序.当时也就只知道怎么用,却不知道什么原理.直到 ...
- java中的函数参数
当是数组时候,是引用传递
- mui日期插件$, each遍历，EventListener事件监听，json格式
(function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...
- php魔术方法使用场景
php魔术方法-----__tostring(),__invoke,__call(),__callStatic ... __tostring(),__invoke() __tostring()方法是在 ...
- 【BZOJ-1123】BLO Tarjan 点双连通分量
1123: [POI2008]BLO Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 970 Solved: 408[Submit][Status][ ...