<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

       /* 普通的标签也是有hover事件的 */

       .dv:hover {

             border:3px solid #ef8d0e;

             /*Y轴上表示上升*/

             transform:translateY(-8px);

        }

       .dv {

           width:90px;

           height:86px;

           transition: all  .25s  ease-in;

           -moz-transition: all  .25s  ease-in;

           -webkit-transition: all  .25s  ease-in;

           border:3px solid #fff;

           margin:300px auto;

           background-color: pink;

       }

    </style>

</head>

<body>

    <div class="dv">

    </div>

</body>

</html>

就是这个效果 ，这个应用在一些地方还挺常见的。

CSS3向上移动的效果的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  3. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  4. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  5. Cool！15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. [HTML] CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  9. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

随机推荐

  1. 各种加载效果，适合做加载loading动画效果 Eclipse版

    Animation.rar 链接: http://pan.baidu.com/s/1c0QkOz2 密码: kd57

  2. 读写锁(pthread)

    读写锁: 用于对于某个给定资源的共享访问,而不是像互斥锁那样,将所有试图进入临界区的线程都阻塞住 相关内容: 线程互斥锁 分配规则:(写独占,读共享) 1.只要没有线程持有某个给定的读写锁用于写,那么 ...

  3. return和exit

    return从当前函数返回而exit结束正在运行的程序 示例: [wangml@iZwz976helaylvgqok97prZ testForC]$ ./exit.test q [wangml@iZw ...

  4. UltraEdit中使用正则表达式-简单用法

    UltraEdit中使用正则表达式 1.认识正则表达式语法: 正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串 ...

  5. My app status is Ready for Sale but I cannot see my app on the App Store. Why? 为什么审核通过后 appstore中搜不到我的app

    这是苹果的官方解答 The following factors could prevent your app from showing up on the App Store: Make sure t ...

  6. curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused

    今天我用curl命令,无论如何都是出现: curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused 找了很久,不知道 ...

  7. java面试题(摘录)

    1.抽象,继承,封装,多态 2.基本数据类型的字节数 byte:1.int:4.char:2.long:8.float:4.double:8.boolean:1 和short:2 3.String , ...

  8. oracle的索引有几种？各有何用途？

    1. b-tree索引Oracle数据库中最常见的索引类型是b-tree索引,也就是B-树索引,以其同名的计算科学结构命名.CREATE INDEX语句时,默认就是在创建b-tree索引.没有特别规定 ...

  9. POJ1426 Find The Multiple —— BFS

    题目链接:http://poj.org/problem?id=1426 Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Tota ...

  10. java基础知识一

    1.计算机基础知识概述 (1) 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处 ...