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. file.getPath() getAbsolutePath() getCanonicalPath()区别

    package file; import java.io.File; import java.io.IOException; public class getFilePath { public sta ...

  2. JS实现幸运抽奖页面

    JS实现简单的幸运抽奖页面 效果图: 图片素材 : 代码如下,复制即可使用: <!DOCTYPE html> <html> <head lang="en&quo ...

  3. TImage 显示 资源中 的图片、TResourceStream、资源文件

    unit Unit5; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  4. HDU 4632 Palindrome subsequence(区间DP求回文子序列数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4632 题目大意:给你若干个字符串,回答每个字符串有多少个回文子序列(可以不连续的子串).解题思路: 设 ...

  5. MySQL学习笔记：date_add

    date_add函数 作用:date_add()函数向日期添加指定的时间间隔 语法: date_add(date,INTERVAL expr type) date:日期表达式 type:时间间隔,da ...

  6. Django render函数

    render() 此方法的作用---结合一个给定的模板和一个给定的上下文字典,并返回一个渲染后的 HttpResponse 对象. 通俗的讲就是把context的内容, 加载进templates中定义 ...

  7. fedora常见问题和解决方案

    fedora作为linux主流发行版之一,大部分功能还是很赞的.只是在美观性和其他一些细节上还是需要手工调整才有更加体验. 以下解决方案,使用fedora20+gnome3环境 eclipse界面难看 ...

  8. 一步一步学习IdentityServer4 (4) 处理特殊需求之-登录等待页面

    用IdentityServer3的时候登录如果采用Post方式大家会发现有中间有一个等待Submit空白页面,界面不友好,现在我想把这个修改自定义的页面Loading 在Identityserver3 ...

  9. MySQL5.6 Waiting for Commit Lock

    mysql  Bug#19843808 自动修复记录 MySQL5.6和Xtrabackup之间存在一个bug,这个bug在5.6.23中已经修复. Xtrabackup备份的时候执行flushs t ...

  10. GUC-14 ForkJoin

    import java.time.Duration; import java.time.Instant; import java.util.concurrent.ForkJoinPool; impor ...