<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		div{

			background: #639;

			width: 235px;

			height: 216px;

			position: absolute;

			top: 300px;

			left: 300px;

		}

		/*nimation-delay:1s*/

		@keyframes arrow1{

			0%{transform: translateY(0);}

			100%{transform: translateY(10px);}

		}

        @-webkit-keyframes arrow1{

        	0%{-webkit-transform: translateY(0);}

        	100%{-webkit-transform: translateY(10px);}

        }

		.arrow{

			animation: arrow1 2s infinite;

			-webkit-animation: arrow1 2s infinite;

			animation-timing-function:ease-in-out;

			-webkit-animation-timing-function:ease-in-out; 

			-webkit-animation-direction:alternate;

			animation-direction:alternate;

		}

	</style>

</head>

<body>

	<div class="arrow">

		<img src="http://paas.mail.10086.cn/res/build/images/c04.png" />

	</div>

</body>

</html>

　　

链接

　　

一个浮动 css3效果的更多相关文章

  1. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  2. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  3. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  4. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  5. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  6. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  7. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  8. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

  9. 12款令程序员惊叹的CSS3效果库

    最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...

随机推荐

  1. CentOS的Qt3和Qt4问题

    在有的系统中,装有Qt3和Qt4, 在使用qmake生成Makefile后,直接make, 出错,说没有头文件, 如果调用了qt3的qmake,那么上头的INCPATH里的头文件路径也指向了Qt3, ...

  2. Jenkins 集成Ansible教程

    前提条件: 1. 部署Jenkins Server 2. 部署 Ansible Server 一.在Jenkins安装SSH插件 系统管理 -> 插件管理 二.在Jenkins 凭证中添加Ans ...

  3. 如何在repeater中找到checkbox并实现全选删除

    checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat＝server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码  ...

  4. web视频资料百度云分享

    韩顺平  struts视频教程(31讲)密码:hsp789 链接:https://pan.baidu.com/s/1kSP4CFt1gpVikRaqQXkFGA 密码:kzvp 韩顺平 spring ...

  5. ubuntu16.04后续工作

    一.ruijie https://blog.csdn.net/u012217085/article/details/24369335 https://blog.csdn.net/Lv_Victor/a ...

  6. Codeforces Round #365 (Div. 2) D - Mishka and Interesting sum（离线树状数组）

    http://codeforces.com/contest/703/problem/D 题意: 给出一行数,有m次查询,每次查询输出区间内出现次数为偶数次的数字的异或和. 思路: 这儿利用一下异或和的 ...

  7. geoserver源码学习与扩展——增加服务接口

    参看:http://www.cnblogs.com/sillyemperor/archive/2011/01/11/1929420.html 上文写的很详细了.

  8. Memcached stats items 命令

    Memcached stats items 命令用于显示各个 slab 中 item 的数目和存储时长(最后一次访问距离现在的秒数). 语法: stats items 命令的基本语法格式如下: sta ...

  9. [Vue]Vue实例的选项props传递数据props为驼峰式命名

    在vue的中文官网有这样的说明: HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop ...

  10. photoshop CS5制作具有立体感的按钮

    今天在学习用photoshop cs5制作html模板的过程中,遇到了立体感按钮的制作问题.当然按钮的立体感也可以用CSS来实现,这里主要是用PS来制作具有立体感的按钮. 我也是PS新手,下面的东西, ...