<!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. 连接池 BoneCPDataSource

    一篇连接池不错的文章 http://blog.csdn.net/vincent_czz/article/details/7646392

  2. Java-Iterator的用法

    迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为“轻量级”对象,因为创建它的代价小. Java中的I ...

  3. 手把手教你学习DSP_硬件设计

    <<手把手教你学习DSP>>顾卫刚,感觉写的不错,将感兴趣的部分摘录下俩. 1.A/D保护及矫正电路 TMS320X2812 AD输入为0-3V,用上述电路可以起到钳位作用.当 ...

  4. t

    http://www.cnblogs.com/courtier/p/4287177.html 360导航_新一代安全上网导航 http://www.cnblogs.com/zhenzi/p/42926 ...

  5. 从spark架构中透视job

    本博文的主要内容如下: 1.通过案例观察Spark架构 2.手动绘制Spark内部架构 3.Spark Job的逻辑视图解析 4.Spark Job的物理视图解析 1.通过案例观察Spark架构 sp ...

  6. Centroid - SGU 134(树的搜索)

    题目大意:给你一个树,树每个点都有一个值, 这个点的的值就等于所有儿子里面点最多的那个儿子,值最小的就叫做重心,求出重心,还有所有等于重心的点,按照升序输出. 分析:就是一个简单的搜索树,求出来最大的 ...

  7. NIO与普通IO文件读写性能对比

    最近在熟悉java的nio功能.nio采用了缓冲区的方式进行文件的读写,这一点更接近于OS执行I/O的方式.写了个新旧I/O复制文件的代码,练练手,顺便验证一下两者读写性能的对比,nio是否真的比普通 ...

  8. JDBC基本知识

    JDBC的作用 JDBC为java访问数据库提供通用的API,可以为多种关系数据库提供统一访问.因为SQL是关系式数据库管理系统的标准语言,只要我们遵循SQL规范,那么我们写的代码既可以访问MySQL ...

  9. 【机房重构】SQL之视图

    近期在重构机房收费系统,越往后就会越感觉到这里很多其它的是对之前学过知识(数据库,设计模式)的一种应用和回想.比方在登录功能中用到了抽象加反射,在学生下机中,我们能够用触发器来同一时候更新两个表.这里 ...

  10. IIS7 和IIS8.0 HTTP 错误 500.19 - Internal Server Error 问题的解决方式

    百度了好久,没找到解决这个问题确切的答案,我也知道肯定是权限的问题,当然,经过一番尝试之后,最终攻克了,解决之道例如以下(个人方法,能够一试): 1.找到你的配置文件所在的目录,我的是 E:\源代码\ ...