CSS3向上移动的效果
<!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向上移动的效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- Cool!15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- [HTML] CSS3 文本效果
CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持
- css3 文本效果
CSS3 文本效果 1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...
随机推荐
- Mysql 数据库中间件
读写分离:简单的说是把对数据库读和写的操作分开对应不同的数据库服务器,这样能有效地减轻数据库压力,也能减轻io压力.主数据库提供写操作,从数据库提供读操作,其实在很多系统中,主要是读的操作.当主数据库 ...
- MYSQL强制使用索引和禁止使用索引
mysql强制索引和禁止某个索引 1.mysql强制使用索引:force index(索引名或者主键PRI) 例如: select * from table force index(PRI) limi ...
- 图像处理之基础---ffmpeg 中的图像缩放
http://blog.csdn.net/bweaglegao/article/details/8540860 http://www.cnblogs.com/acloud/archive/2011/1 ...
- Spark学习笔记:(一)入门 glance
参考: http://spark.apache.org/docs/latest/quick-start.html 其它资料: http://mojijs.com/2015/04/190845/i ...
- SKStoreReviewController之程序内评价
在iOS 10.3出现之前,App实现评价方式一般有两种: (一)deep link调用.在app 链接地址后面拼上action=write-review这种方式可以实现程序内评价: (二)App跳转 ...
- 关于chroot
1 chroot做了什么 chroot只是修改了所有的path resolution过程,也就是说,chroot之后,所有的命令和库的根目录都是chroot到的目录. 2 chroot使用的条件 目标 ...
- what's WSDL
WSDL (Web Services Description Language,Web服务描述语言) 它是一种XML Application,他将Web服务描述定义为一组服务访问点,客户端可以通过这些 ...
- chrome——关于chrome浏览器的奇葩问题
前言 说下自己遇到的关于chrome的奇葩问题~ 问题 目前就一个,还是刚才才遇到的~ 消息通知 客户的chrome浏览器死活没有通知,检查后发现通知权限未开启, 通知权限开启后,还是没有提示,最后排 ...
- poj 1094 Sorting It All Out 解题报告
题目链接:http://poj.org/problem?id=1094 题目意思:给出 n 个待排序的字母 和 m 种关系,问需要读到第 几 行可以确定这些字母的排列顺序或者有矛盾的地方,又或者虽然具 ...
- codeforces 450B. Jzzhu and Sequences 解题报告
题目链接:http://codeforces.com/problemset/problem/450/B 题目意思:给出 f1 和 f2 的值,以及n,根据公式:fi = fi-1 + fi+1,求出f ...