<!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. ArcGIS教程：分水岭

    摘要 确定栅格中一组像元之上的汇流区域. 使用方法 · 各个分水岭的值将取自输入栅格中源的值或者要素倾泻点数据.假设倾泻点为栅格数据集,则使用像元值.假设倾泻点为点要素数据集,则从指定的字段中获取值. ...

  2. DOM编程 --《高性能JavaScript》

    1.重绘和重排 浏览器下载完页面的所有组件 —— HTML标记,CSS,JavaScript,图片,会解析并生成两个内部数据结构. DOM树 表示页面结构 渲染树(CSS) 表示DOM节点如何显示 当 ...

  3. iOS 内购遇到的坑

    一.内购沙盒测试账号在支付成功后,再次购买相同 ID 的物品,会提示如下内容的弹窗.您以购买过此APP内购项目,此项目将免费恢复 原因: 当使用内购购买过商品后没有把这个交易事件关,所以当我们再次去购 ...

  4. Python调用C/Fortran混合的动态链接库--上篇

    内容描述: 在32位或64位的windows或GNU/Linux系统下利用Python的ctypes和numpy模块调用C/Fortran混合编程的有限元数值计算程序 操作系统及编译环境: 32bit ...

  5. COGS28 [NOI2006] 最大获利[最大权闭合子图]

    [NOI2006] 最大获利 ★★★☆   输入文件:profit.in   输出文件:profit.out   简单对比时间限制:2 s   内存限制:512 MB [问题描述] 新的技术正冲击着手 ...

  6. 关闭SVN服务

    关闭TSVNCache.exe进程 在Windows下使用SVN,通常都会安装TortoiseSVN,安装后会有一个TSVNCache.exe的进程驻留内存,这个进程会定时地去扫描Subversion ...

  7. asp.net连接Access数据库实现登陆功能

    这里话就不多说了,直接演示代码. 连接access数据库首先需要配置web.config <appSettings> <add key="AccessConnString& ...

  8. Golang 现有的哲学中，要求你尽量手工处理所有的错误返回

    更优雅的 Golang 错误处理 - Go语言中文网 - Golang中文社区 https://studygolang.com/articles/9407

  9. 解决 git branch -a 无法全部显示远程的分支，只显示master分支

    新建分支 若遇到 git branch -a 无法全部显示远程的分支,只显示master分支 可以通过 git fetch 将本地远程跟踪分支进行更新,与远程分支保持一致

  10. Html5--6-46 渐变效果

    Html5--6-46 渐变效果 学习要点 掌握线性渐变和径向渐变的使用 线性渐变: 属性:linear-gradinet(开始位置 角度,起始颜色,终止颜色 ) 开始位置:渐变开始的位置,属性值可以 ...