<!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. Oracle启动和关闭服务

    Oracle须要启动和关闭的服务: 1.OracleOracle_homeTNSListener     相应于数据库的监听程序 2.OracleServiceSID                 ...

  2. Ajax的简单实现(JQuary)

    还是之前的例子,相对来说,用JQ就简单了很多,真的多,因为JQ直接把方法都写好了,直接调用就行了,,ԾㅂԾ,, php文件就不需要多做修改了,如下: <?php //改变Content-Type ...

  3. eclipse无法启动问题记录

    几天没开eclipse,居然报错“can not unload……”,搜索答案发现没有准确的,遵从了一个多人顶赞的办法重下eclipse,把配置文件拷贝一份,结果悲剧了,虽然能够打开了,但我之前配置的 ...

  4. 智能停车O2O 独角兽初现：“ETCP停车”获5000万美金A轮融资

        日前,国内第一智能停车平台"ETCP停车"宣布完毕A轮融资,由源代码资本.SIG.易车网.经纬中国和商企界知名人士联合投资超过5000万美金.同一时候获悉,ETCP作为中国 ...

  5. Client should know only resource URIs and that’s all.

    REST Principles and Architectural Constraints – REST API Tutorial https://restfulapi.net/rest-archit ...

  6. Cache 简介

    一.什么是缓存1.Cache是高速缓冲存储器 一种特殊的存储器子系统,其中复制了频繁使用的数据以利于快速访问2.凡是位于速度相差较大的两种硬件/软件之间的,用于协调两者数据传输速度差异的结构,均可称之 ...

  7. Oracle Exception

    Oracle存储过程的异常处理 1.为了提高存储过程的健壮性,避免运行错误,当建立存储过程时应包含异常处理部分.2.异常(EXCEPTION)是一种PL/SQL标识符,包括预定义异常.非预定义异常和自 ...

  8. 使用POCO发送HTTP(S)请求

    POCO GitHub地址https://github.com/pocoproject/poco http_example.cpp #include <iostream> #include ...

  9. bzoj3137: [Baltic2013]tracks

    炸一看好像很神仙的样子,其实就是个sb题 万年不见的1A 但是我们可以反过来想,先选一个起点到终点的联通块,然后这联通块后面相当于就能够走了,继续找联通块 然后就能发现直接相邻的脚步相同的边权为0,否 ...

  10. Android Studio运行出现项目 错误：非法字符：“\ufeff”

    导入项目时,遇到编码问题. 主要原因是: eclipse可以自动把UTF-8+BOM文件转为普通的UTF-8文件,但Android Studio需要重新转换一下编码 解决方法: 将编码格式UTF-8+ ...