<!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. sublime 中配置 python 运行

    运行是按快捷键 ”ctrl + B“ Preferences->Browse Packages->Python->Python.sublime-build 编辑这个文件.   修改成 ...

  2. Android SDK更新失败的解决方案（原创）

    笔者在搭建好Android环境后,进行Android的SDK更新下载升级,乌龟的速度,更让人生气的是到了85%的进度时,直接timeout,循环3次无果.查阅相关资料,原来是Google的服务器遭遇了 ...

  3. js对闭包的理解

    原文链接http://www.jb51.net/article/24101.htm,讲的很好,清晰明了.

  4. LightOJ - 1422 Halloween Costumes —— 区间DP

    题目链接:https://vjudge.net/problem/LightOJ-1422 1422 - Halloween Costumes    PDF (English) Statistics F ...

  5. android.annotation.SuppressLint

    Lint是一个静态检查器,它围绕Android项目的正确性.安全性.性能.可用性以及可访问性进行分析.它检查的对象包括XML资源.位图.ProGuard配置文件.源文件甚至编译后的字节码. Lint包 ...

  6. mysql 5.5升级到5.7版本操作流程

    一.备份原来 phpStudy 中 MySQL 安装目录 二.把下载的 MySQL 压缩文件解压至 phpStudy 下的 MySQL目录,复制 my-default.ini ,重命名为 my.ini ...

  7. BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化

    BZOJ_1492_[NOI2007]货币兑换Cash_CDQ分治+斜率优化 Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券 ...

  8. 「LuoguP4779」 【模板】单源最短路径（标准版）

    Description 2018 年 7 月 19 日,某位同学在 NOI Day 1 T1 归程 一题里非常熟练地使用了一个广为人知的算法求最短路. 然后呢? 100→60: Ag→Cu: 最终,他 ...

  9. NOIP2006题解

    传送门 考查题型 模拟 dp T1 能量项链 题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并 ...

  10. sublime text 3中修改tab键为缩进4个空格

    1. 菜单栏里点击 Preferences-> Setting-User, 如图 2. 在弹出来的文本里,添加如下两行: { // 注意只有一个大括号,如果之前有属性,如在之前的属性后确保有 , ...