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. scala tuple中的syntactic sugar

    List[Tuple2[String, Int]] // Base List[(String, Int)] // Syntactic sugar List[Tuple3[String, Float, ...

  2. java基础76 web服务器之Tomcat服务器

    (注:本文是以“压缩版Tomcat”为例,展开描述的) 一.Tomcat服务器的介绍 1.服务器 1.1.服务器的种类 从物理上讲:服务器就是一台pc机器.至少8核/8G以上.内存至少用T来计算.宽带 ...

  3. CSS — 贝塞尔曲线(cubic-bezier)

    cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,规定是 cubic-bezier(<x1>, <y1>, <x2>, & ...

  4. Http PipeLining

    Http PipeLining */--> div.org-src-container { font-size: 85%; font-family: monospace; } pre.src { ...

  5. Django项目流程

    创建项目和应用 django-admin.py startproject project_name cd project_name python manage.py startapp app_name ...

  6. Firefox地址栏样式设定

    我希望把Firefox的界面调整为chrome-like,一个关键的地方就是地址栏:地址栏和tab之间的距离太大了,地址栏和页面本身之间的距离也太大. 设定方法是在FF中安装stylish插件,然后加 ...

  7. Java 常用的几个lambda表达式

    Lambda表达式是Java 8一个非常重要的新特性.它像方法一样,利用很简单的语法来定义参数列表和方法体.目前Lambda表达式已经成为高级编程语言的标配,像Python,Swift,C#等都已经支 ...

  8. 【LOJ】#6391. 「THUPC2018」淘米神的树 / Tommy

    题解 一道非常神仙的计数题 如果只有一个点,就是非常简单的树型dp \(f_{u} = (siz_{u} - 1)! \prod_{v \in son_{u}} \frac{f_{v}}{siz_{v ...

  9. 1. python 类型和运算

    类型和运算 (Types and Operations) Introducing Python Object Types 在非正式的意义上, 在 Python 中, 我们用一些东西做事情. " ...

  10. Python网络编程之socket应用

    1 引言 本篇主要对Python下网络编程中用到的socket模块进行初步总结.首先从网络基础理论出发,介绍了TCP协议和UDP协议:然后总结了socket中的常用函数:最后通过实际代码展示基本函数的 ...