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. 栈应用之 后缀表达式计算 （python 版）

    栈应用之 后缀表达式计算 (python 版) 后缀表达式特别适合计算机处理 1.  中缀表达式.前缀表达式.后缀表达式区别  中缀表达式:(3 - 5) * (6 + 17 * 4) / 3 17 ...

  2. cbow&&skipgram详细

    前面:关于层次huffman树和负例采样也要知道的,这里就不详细写了 来源于:https://mp.weixin.qq.com/s?__biz=MzI4MDYzNzg4Mw==&mid=224 ...

  3. window.onload绑定多个事件 —— 两种解决方案

    前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. window.onload = myFunction; 问题 ...

  4. 2015309南皓芯《Java程序设计》实验一（Java开发环境的熟悉）实验报告

    一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤一(新建文件夹):打开windows下的cmd → 输入cd Code命令进入Code目录 → 输入md 20 ...

  5. CVE-2010-2883Adobe Reader和Acrobat CoolType.dll栈缓冲区溢出漏洞分析

       Adobe Acrobat和Reader都是美国Adobe公司开发的非常流行的PDF文件阅读器. 基于Window和Mac OS X的Adobe Reader和Acrobat 9.4之前的9.x ...

  6. 13 在 O(1) 时间内删除链表节点

    删除链表的一个结点,用下一个结点覆盖掉要删除的结点,再释放掉要删结点的下一个结点的内存 Java: public ListNode deleteNode(ListNode head, ListNode ...

  7. android拾遗——Android Intent详解

    一. Intent 作用 Intent 是一个将要执行的动作的抽象的描述,一般来说是作为参数来使用,由Intent来协助完成android各个组件之间的通讯.比如说调用startActivity()来 ...

  8. hbase 性能调

    一. HBase的通用优化 1 高可用 在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果 Hmaster 挂掉了,那么整 ...

  9. LoadRunner脚本篇

    LoadRunner脚本篇     1概述 2脚本录制 3脚本编写 4脚本调试   关  键  词:LoadRunner 性能测试脚本 摘      要:编写一个准确无误的脚本对性能测试有至关重要的意 ...

  10. Redis的安装与部署(CentOS6.5)

    一.下载安装包 wget http://redis.googlecode.com/files/redis-2.4.5.tar.gz 二.编译源程序 tar -zxvf redis-2.4.5.tar. ...