<!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. 【项目发起】千元组装一台大型3D打印机全教程（一）前言

    前言 最近又碰到了大尺寸模型打样的需求,我这台17cm直径的kossel mini就捉襟见肘了.怎么办呢,这个时候kossel的好就体现出来了,随意扩展,那么就自己做个kossel-max吧.为了向前 ...

  2. java中方法中声明三个点“...”作用

    public class Test {  public static void main(String[] args) {   String str[] = {"s"," ...

  3. $.ajax 使用详解

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作. $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() ...

  4. 使用双引擎，让kbmmw 的客户端访问更方便（既给浏览器做服务，也给桌面程序做服务）

    前面我们一直都讲了如何使用kbmmw smarthttpservice 给客户端提供REST  服务.主要都是返回给 浏览器访问的,如果我们使用delphi 开发桌面应用,如何使用这些服务呢?其实一切 ...

  5. spring cloud 服务消费

    Ribbon Ribbon可以在通过客户端中配置的ribbonServerList服务端列表去轮询访问以达到均衡负载的作用. 当Ribbon与Eureka联合使用时,ribbonServerList会 ...

  6. IDHTTP用法详解 good

    一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入ID ...

  7. 树状数组（二叉索引树 BIT Fenwick树） *【一维基础模板】（查询区间和+修改更新）

    刘汝佳:<训练指南>Page(194) #include <stdio.h> #include <string.h> #include <stdlib.h&g ...

  8. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  9. Oracle: 禁忌给一般用户授权create any procedure、execute any procedure

    给一般用户授 create any procedure.execture any procedure 这2个权限是很不安全的事. 因为授权后,通过一些处理,该用户可以取得dba权限,请一定注意. 下面 ...

  10. 从BadBoy导入脚本并调试

    一. 利用BadBoy录制自动化脚本,录制事件为禅道中创建bug 在badboy地址栏输入被访问的URL地址 录制成功后截图如下: 录制完成后在badboy窗口中回放确定脚本录制的正确性,回放成功后清 ...