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. java 二叉树遍历

    package com.lever; import java.util.LinkedList;import java.util.Queue; /** * 二叉树遍历 * @author lckxxy ...

  2. JAVA随笔（三）

    私有是针对类的,而不是对象. static 函数,其实是类函数.之前一直不太理解每个类中的static main是什么意思,为什么main中不能直接调用非静态的变量:因为main是 类函数,不是属于某 ...

  3. AdvStringGrid 复选框、goRowSelect

    var I: Integer; begin do begin AdvStringGrid1.AddCheckBox(, I, True, True); AdvStringGrid1.Cells[,I] ...

  4. tensorflow高级库

    1.tf.app.flags tf定义了tf.app.flags,用于支持接受命令行传递参数,相当于接受argv.tf.app.flags.DEFINE_xxx()就是添加命令行的optional a ...

  5. C++11之auto和decltype

    auto自动类型推断,用于从初始表达式中推断出变量的类型. auto a;// 错误,没有初始化表达式,无法推断出a的类型 autoint a =10;// 错误,auto临时变量的语义在C++ 11 ...

  6. 20155309 2016-2017-2《Java程序设计》课程总结

    预备作业1http://www.cnblogs.com/nhx19970709/p/6155580.html 第一次写博客,也是第一次用Markdown,具体流程都还不是很熟悉 预备作业2http:/ ...

  7. 【Sequel Pro】下载查询结果乱码问题处理方式

    1.下载查询结果已CSV格式保存 2.出现乱码问题样式如下截图: 3. 右键下载的CSV文件,选择用文本编辑打开 4.全选打开的页面内容,重新新建“文本编辑”并进行“储存” 5.打开 1.CSV,则看 ...

  8. **iOS发JSON请求中字符串加转义，返回的JSON去转义

    iOS中使用NSSerialization把对象转为JSON字符串后,多出来反斜杠的问题 http://segmentfault.com/q/1010000000576646 NSDictionary ...

  9. day6 shelve模块

        shelve模块 shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式,shelve模块是对pickle模块的补充.我们知道 ...

  10. python日常总结

    1. post请求中是否可以在url中携带请求体信息? 可以.Get请求时,请求体放在URL中; POST请求,请求体既可以是Form表单中的数据 也可以在请求的URL地址中放请求体信息. 如: &l ...