<!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. Bzoj 2763: [JLOI2011]飞行路线 拆点,分层图,最短路,SPFA

    2763: [JLOI2011]飞行路线 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1694  Solved: 635[Submit][Statu ...

  2. [MIREX] MIREX评测介绍

    MIREX作为国际最权威音频检索评测大赛,竟然在百度上找不到任何介绍,只有几个与什么搜狗.腾讯获得什么成绩相关的检索内容,相比而言,TRECVID的内容收到重视多了...由于研究生阶段主要研究音频领域 ...

  3. lightoj 1027 简单概率dp

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1027 #include<cstdio> #include<cstri ...

  4. nyoj 32 组合数【简单dfs】

    组合数 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 找出从自然数1.2.... .n(0<n<10)中任取r(0<r<=n)个数的所有组合 ...

  5. Git命令详解（一）-个人使用

    本文暂时不会涉及到团队如何使用Git的内容,而是从个人的角度探讨如何用好Git. 约定 绿色的5位字符表示提交的ID,文中用<commit>表示,分别指向父节点.分支用橘色显示,分别指向特 ...

  6. android ROM备份和还原，再也不用当心刷到垃圾ROM，而还原不了原有系统

    安卓刷机后如何还原以前ROM 和系统备份,本教程为大家介绍刷机后如何还原到以前的ROM 和系统备份. 很多人,看到了好多新的rom,包括测试版的新rom,心里痒痒的.想刷一刷.尝尝鲜,结果刷完,感觉新 ...

  7. 【Android - MD】之FloatingActionButton的使用

    FloatingActionButton(FAB) 是 Android 5.0 新特性--Material Design 中的一个控件,是一种悬浮的按钮. FloatingActionButton 是 ...

  8. java中main函数解析（转载）

    从写java至今,写的最多的可能就是主函数 public static void main(String[] args) {} 但是以前一直都没有问自己,为什么要这么写,因为在c语言中就没有这样子的要 ...

  9. jQuery 实现上下,左右滑动

    前几天的任务:http://t.sina.com.cn/  的下滑效果. 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一 ...

  10. javascript的执行顺序

    先看下面两段js程序,先是定义式函数写法: 复制代码 <script type="text/javascript"> function myfunc(){ alert( ...