css3实现卷页效果

  • |
  • 浏览：31
  • |
  • 更新：2015-01-08 13:30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

分步阅读

百度经验:jingyan.baidu.com

页面上经常会看到鼠标移动上去，对象的一角就向内侧卷曲，下面用css3实现这个效果

百度经验:jingyan.baidu.com

工具/原料

  • chrome

百度经验:jingyan.baidu.com

方法/步骤

  1. 1

    首先，新建一个只有div的页面，并加上适当的样式

  2. 2

    简单的来说实现这个效果，就是在div的角上加一个长宽为0的div，当hover时变化它的长宽值

    所以为div的before伪类加上长宽为0内容

  3. 3

    再实现hover的效果

  4. 4

    当鼠标移到div上时，就能看到右上角生硬的出现了一个白色的方块

  5. 5

    接下来要让动画平滑一下，在before中加上属性。现在就能看到右上角有平滑的效果了。

    transition-duration: 0.3s;

    transition-property: width, height;

  6. 6

    但是这和卷曲的效果似乎还有很大的差距，接下来就要为before加上阴影，来显得卷曲。

    background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);

    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);

    然后当鼠标hover时，就能看到如下图的效果了。

    END

百度经验:jingyan.baidu.com

注意事项

  • 想了解更多css3相关内容请自行网上搜索关键字 

css3实现卷页效果http://jingyan.baidu.com/article/73c3ce2806aef9e50343d93a.html的更多相关文章

  1. word 2010 页眉 http://jingyan.baidu.com/article/a65957f4b0208624e77f9b55.html

    word 2010 页眉 http://jingyan.baidu.com/article/a65957f4b0208624e77f9b55.html

  2. http://jingyan.baidu.com/article/2009576193ee38cb0721b416.html

    http://jingyan.baidu.com/article/2009576193ee38cb0721b416.html

  3. http://jingyan.baidu.com/article/d169e186aa8728436611d8f3.html

    http://jingyan.baidu.com/article/d169e186aa8728436611d8f3.html

  4. http://jingyan.baidu.com/article/db55b609aac41e4ba30a2f86.html

    http://jingyan.baidu.com/article/db55b609aac41e4ba30a2f86.html

  5. http://jingyan.baidu.com/article/636f38bb3eb78ad6b8461082.html

    http://jingyan.baidu.com/article/636f38bb3eb78ad6b8461082.html

  6. http://jingyan.baidu.com/article/fcb5aff78e6a48edab4a7146.html

    http://jingyan.baidu.com/article/fcb5aff78e6a48edab4a7146.html

  7. http://jingyan.baidu.com/article/86112f13582848273797879b.html

    http://jingyan.baidu.com/article/86112f13582848273797879b.html

  8. http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html

    http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html

  9. http://jingyan.baidu.com/article/bad08e1ee14ae409c85121cf.html

    http://jingyan.baidu.com/article/bad08e1ee14ae409c85121cf.html

随机推荐

  1. 排序与相关性(Sorting and Relevance)

    本文翻译自Elasticsearch官方指南的Sorting and Relevance一章的第一节. 原文地址:http://www.elastic.co/guide/en/elasticsearc ...

  2. eclipse导入/导出项目要注意三个地方

    这个三个地方的jdk必须保持一致,不报错

  3. git clone命令使用

    git clone命令使用 分类: 项目构建2013-06-26 15:43 38660人阅读 评论(2) 收藏 举报 GitClone git clone 命令参数: usage: git clon ...

  4. T-sql语句修改数据库逻辑名、数据库名、物理名(sql2000)

    --更改MSSQL数据库物理文件名Sql语句的写法 --注意:要在活动监视器里面确保没有进程连接你要改名的数据库!!!!!!!!!!!!!!!!!!!! -- Sql语句如下 USE master - ...

  5. CVE-2012-0003 Microsoft Windows Media Player ‘winmm.dll’ MIDI文件解析远程代码执行漏洞 分析

    [CNNVD]Microsoft Windows Media Player ‘winmm.dll’ MIDI文件解析远程代码执行漏洞(CNNVD-201201-110)    Microsoft Wi ...

  6. 【AtCoder】ARC062F - AtCoDeerくんとグラフ色塗り / Painting Graphs with AtCoDeer

    题解 考虑一个点双(因为是简单环),如果没有环(两点一线),那么乘上K 如果有一个环,那么用polya定理,每个置换圈有gcd(i,n)个循环节 如果有两个及以上的环,任何一种置换都合法,那么只和每个 ...

  7. 【Java网络编程】基于 UDP 的聊天通信

    使用 udp 协议,写一个基于命令行的聊天软件:客户端跟服务端分别在命令行启动之后,客户端和服务器端可以互相发送数据. 代码实现如下: 一.创建线程 sendThread 和 receiveThrea ...

  8. myql root用户远程访问

    虚拟机搭建的lnmp开发环境,mysql在虚拟机正常访问,想在物理机通过数据库管理工具Navicat远程登录,方便建表查询等操作.经网上一查,有答案了. [以下是转载]http://www.cnblo ...

  9. 构建第一个Spring Boot项目

    1.启动IntelliJ IDEA,点击"Create New Project"  2.选择"Spring initializr",设定SDK及Spring ...

  10. java 代理设计模式

    首先代理(deleration)是什么,在日常生活中我们有很多这种的例子,比如你上个QQ,各种空间被什么代理刷屏,对的,代理不是生产产品的商家,也不是进购产品的卖家,他们只是帮别人卖东西,这就相当于一 ...