<!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. Hadoop的文件读写操作流程

    以下主要讲解了Hadoop的文件读写操作流程: 读文件 读文件时内部工作机制参看下图: 客户端通过调用FileSystem对象(对应于HDFS文件系统,调用DistributedFileSystem对 ...

  2. Cogs 1070. [焦作一中2012] 玻璃球游戏 带权并查集,逆序处理

    题目: http://cojs.tk/cogs/problem/problem.php?pid=1070 1070. [焦作一中2012] 玻璃球游戏 ★   输入文件:marbles.in   输出 ...

  3. AXI总线

    AXI(Advanced eXtensible Interface)是一种总协议,该协议是ARM公司提出的AMBA(Advanced Microcontroller Bus Architecture) ...

  4. 对C++进行优化了的android-ndk-r6-crystax-2

    https://www.crystax.net/en/android/ndk/6?id=6 Here is customized distribution of Android NDK r6 whic ...

  5. gRPC：Google开源的基于HTTP/2和ProtoBuf的通用RPC框架

    gRPC:Google开源的基于HTTP/2和ProtoBuf的通用RPC框架 gRPC:Google开源的基于HTTP/2和ProtoBuf的通用RPC框架 Google Guava官方教程(中文版 ...

  6. PMD使用手册

    文中测试例子均采用JHotDraw7源码,官网关于 JHotDraw的检测结果:http://pmd.sourceforge.net/reports/jhotdraw_JHotDraw.html 下载 ...

  7. JSON 数据的系统解析

    - (IBAction)jsonSystemButtonDidClicked:(UIButton *)sender { self.JSONArray = [NSMutableArray array]; ...

  8. [RxJS] Transformation operators: debounce and debounceTime

    Debounce and debounceTime operators are similar to delayWhen and delay, with the difference that the ...

  9. Android微信智能心跳方案

    前言:在13年11月中旬时,因为基础组件组人手紧张,Leo安排我和春哥去广州轮岗支援.刚到广州的时候,Ray让我和春哥对Line和WhatsApp的心跳机制进行分析.我和春哥抓包测试了差不多两个多礼拜 ...

  10. iOS UIKit：viewController之定义(2)

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...