css实现翻页效果
2015-09-09 20:55
741 查看
如图,鼠标移动到图上,实现右上角翻页的效果,本例主要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线性渐变颜色
- css3实现动画横幅
- ActionBar详解之三(自定义样式)
- [CSS] 去掉a标签超链接的虚线框,禁止浏览器默认input样式
- Css实现透明效果,兼容IE8
- CSS中文标点符号顶在行首的问题
- 纯洁CSS实现下拉菜单和下拉容器(纯洁CSS导航栏和导航下拉容器)
- 清除浮动(Clear Float)
- 多行文字溢出显示省略号函数
- 关于定制RadioGroup样式之填坑记,记录而已
- iPhone自带click点击效果用css去除
- 关于iframe的一点总结(jq,css,html)
- 你应该知道的一些事情——CSS权重
- 使用 Grunt, Gulp, Broccoli 或 Brunch 移除页面内无用的 CSS 样式
- [持续更新]CSS3学习笔记(三)弹性盒子
- CSS的盒子高度height使用100%后浏览器不兼容的解决办法
- CSS3 选择器——属性选择器
- 详解CSS3特性@Media如何实现响应式设计
- CSS中关于快速定位和覆盖当前点选器的办法
- div+css布局问题:设置浮动后的div高度变化后不超出最外层div