<!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. Mysql 数据库中间件

    读写分离:简单的说是把对数据库读和写的操作分开对应不同的数据库服务器,这样能有效地减轻数据库压力,也能减轻io压力.主数据库提供写操作,从数据库提供读操作,其实在很多系统中,主要是读的操作.当主数据库 ...

  2. MYSQL强制使用索引和禁止使用索引

    mysql强制索引和禁止某个索引 1.mysql强制使用索引:force index(索引名或者主键PRI) 例如: select * from table force index(PRI) limi ...

  3. 图像处理之基础---ffmpeg 中的图像缩放

    http://blog.csdn.net/bweaglegao/article/details/8540860 http://www.cnblogs.com/acloud/archive/2011/1 ...

  4. Spark学习笔记:(一)入门 glance

    参考: http://spark.apache.org/docs/latest/quick-start.html 其它资料:    http://mojijs.com/2015/04/190845/i ...

  5. SKStoreReviewController之程序内评价

    在iOS 10.3出现之前,App实现评价方式一般有两种: (一)deep link调用.在app 链接地址后面拼上action=write-review这种方式可以实现程序内评价: (二)App跳转 ...

  6. 关于chroot

    1 chroot做了什么 chroot只是修改了所有的path resolution过程,也就是说,chroot之后,所有的命令和库的根目录都是chroot到的目录. 2 chroot使用的条件 目标 ...

  7. what's WSDL

    WSDL (Web Services Description Language,Web服务描述语言) 它是一种XML Application,他将Web服务描述定义为一组服务访问点,客户端可以通过这些 ...

  8. chrome——关于chrome浏览器的奇葩问题

    前言 说下自己遇到的关于chrome的奇葩问题~ 问题 目前就一个,还是刚才才遇到的~ 消息通知 客户的chrome浏览器死活没有通知,检查后发现通知权限未开启, 通知权限开启后,还是没有提示,最后排 ...

  9. poj 1094 Sorting It All Out 解题报告

    题目链接:http://poj.org/problem?id=1094 题目意思:给出 n 个待排序的字母 和 m 种关系,问需要读到第 几 行可以确定这些字母的排列顺序或者有矛盾的地方,又或者虽然具 ...

  10. codeforces 450B. Jzzhu and Sequences 解题报告

    题目链接:http://codeforces.com/problemset/problem/450/B 题目意思:给出 f1 和 f2 的值,以及n,根据公式:fi = fi-1 + fi+1,求出f ...