<!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. Java基础之String,StringBuilder,StringBuffer

    在创建字符串的时候总是习惯性的使用String str = "...";,str = str+"abcd";也有听说过StringBuffer,StringBu ...

  2. Java基础（三）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  3. [git] git 分支( branch ) 的基本使用

    分支( branches ) 是指在开发主线中分离出来,做进一步开发而不影响到原来主线. Git 存储的不是一系列的更改集( changeset ),而是一系列快照.当你执行一次 commit 时, ...

  4. nyoj 329 循环小数【KMP】【求最小循环节长度+循环次数+循环体】

    循环小数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 我们可爱的 c小加 近段儿正在潜心研究数学,当他学习到循环小数这一部分时不是太明白循环体是什么意思(比如说3 ...

  5. dom0的cpu hotplug【续】

    上一篇说到,手动xm vcpu-pin住,在hotplug就好了. 本质上,还是因为代码有bug,导致vcpu offline的时候,信息没有清理干净,有残留,当vcpu online的时候,如果调度 ...

  6. poj1673

    所谓Exocenter就是垂心.不难证明. #include <iostream> #include <math.h> #include <stdio.h> str ...

  7. Groovy新手教程

    Groovy新手教程 kmyhy@126.com  2009-5-13 一.groovy是什么 简单地说,Groovy 是下一代的java语言,跟java一样,它也执行在 JVM 中. 作为跑在JVM ...

  8. Android bitmap图片处理

    一.View转换为Bitmap         在Android中所有的控件都是View的直接子类或者间接子类,通过它们可以组成丰富的UI界面.在窗口显示的时候Android会把这些控件都加载到内存中 ...

  9. UML进行Linux内核调试

    http://www.lenky.info/ http://blog.csdn.net/ztz0223/article/details/7874759 http://user-mode-linux.s ...

  10. Understanding JTS--reference

    Part I-An introduction to transactions If you look at any introductory article or book on J2EE, you' ...