<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
/* 渐变颜色参数， 类型， 开始坐标， 结束坐标，开始颜色，结束颜色，过度点颜色（可选） */
.cont {
width: 100px;
height: 100px;
//background-color: #FCC;
margin-left: 50%;
margin-top: 100px;
overflow:hidden;
padding-top:10px;
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.2)),color-stop(1%,#fff));
}
.cont i { width:24px ; height:24px; text-align:center; line-height:24px; font-style:normal; background-color:#09F; color:#fff; border-radius:50%; display:block; margin:0 auto;}
.cont p { text-align:center;}
.cont:hover i {
-webkit-animation: toTopFromBottom .3s forwards;
/* 调用动画名称 时间 结束状态 */

}
/* 定义动画*/
@-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform:translateY(-100%)
}
50% {
opacity:.3;
-webkit-transform:translateY(40%)
}
51% {
opacity:1
}
}
</style>
</head>

<body>
<div class="cont"><i>1</i><p>测试文本</p></div>

</body>

</html>

做了一个类似天猫鼠标经过icon的动画，记录一下的更多相关文章

  1. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  2. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  3. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  4. 制作一个类似苹果VFL的格式化语言来描述UIStackView

    在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第 ...

  5. 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4

    在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...

  6. 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4

    在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...

  7. 实现一个类似Chrome新功能提示的popoup

    先让我们看一下Chrome的popup是什么样的: 这个“直接搜索网页”与“在打开的标签页之间切换”就是两个功能导航,还做了一个动画效果,会不停的上下晃. 我通过WindowManager的addVi ...

  8. 写一个类似淘宝的ios app需要用到哪些技术？

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  9. 8.如何自己设计一个类似 Dubbo 的 RPC 框架？

    作者:中华石杉 面试题 如何自己设计一个类似 Dubbo 的 RPC 框架? 面试官心理分析 说实话,就这问题,其实就跟问你如何自己设计一个 MQ 一样的道理,就考两个: 你有没有对某个 rpc 框架 ...

随机推荐

  1. C#调用C++动态库（dll）

    在实际软件开发过程中,由于公司使用了多种语言开发,在C#中可能需要实现某个功能,而该功能可能用其他语言已经实现了,那么我们可以调用其他语言写好的模块吗?还有就是,由于C#开发好的项目,我们可以利用re ...

  2. ural 1333 化平面为点计算覆盖率

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1333 #include<cstdio> #include<cstrin ...

  3. ADB server didn't ACK的问题

    今天出现eclipse用手机调试时,一直起不来,出现ADB server didn't ACK,提示restart adb或者重启eclipse,按照原来的,查看了任务管理器中,没发现已经启动的adb ...

  4. wmic

    前沿:WMIC命令在我们的工作中可以帮助我们减少对其他工具的依赖并节省我们的时间,实在是一个值得学习和研究的好东西 命令很多,这里我把网上目前能找到的较实用的一些命令整理出来,希望各位看官能找到自己需 ...

  5. linux —— 启动引导程序 lilo 与 grub

    目录:1.启动引导程序概要 2.lilo 的安装与配置 3.grub的安装与配置 4.两种引导程序的切换  5.附:编译内核时的lilo 设置 1.启动引导程序概要 2.lilo 的安装与配置 3.g ...

  6. 关于用jQuery知识来实现优酷首页轮播图！

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  7. 在octopress中gist tab不能正确的插入gist代码

    今天尝试用Octopress的gits tab插件来把gist插入到博客中,但是发现没有插入成功,调用rake generate报如下的错误: Gist replied with 404 for ht ...

  8. The app references non-public selectors in Payload

    上周上传app到appstore在validation完后有警告提示"The app references non-public selectors in Payload/wacao.app ...

  9. Android无法更新sdk的解决办法

    修改 windows/system32/drivers/etc/hosts 文件 添加 203.208.46.146 dl.google.com203.208.46.146 dl-ssl.google ...

  10. java websockect

    https://github.com/TooTallNate/Java-WebSocket (websockect类库包) http://blog.openlg.net/index.php/archi ...